Given that a project can be

  • not yet started
  • active
  • active, but paused
  • completed

What are good colours to help me represent those states (as augmentation, only, to text) ?

  • 4
    Colors should never be used to convey information,color blindness is extremely common in males in particular and is not always clear – downrep_nation Dec 30 '15 at 11:02
  • 3
    I am aware of that and am using color only as a secondary indicator – Mawg says reinstate Monica Dec 30 '15 at 11:04
  • 2
    That's an... interesting abbreviation in your question.. – maxathousand Jan 7 '19 at 22:15
  • 1
    In three years, you are the only one who noticed :-) – Mawg says reinstate Monica Jan 8 '19 at 7:23

Colors as a status are tricky and very dependent on the context of the web application and their application. This is just food for thought.

Contextual consistency helps avoid confusion (such as using red to indicate something is paused but also indicates a system has broken - one situation would be more dire than the other but would be visually equal to the user).

grid with paused status and red and alert the building is burning in red

You are trying to make color associations with a sequential status (trying to indicate one thing happens after another) and something to consider is if any step in this process indicates that this status is "good" or "bad" to the user. If it is then using some universally recognized colors like green or red may be appropriate to add when the sequence is complete. If the sequence doesn't indicate "good" or "bad" then before using those colors you should consider if red is used in other aspects of the application to indicate danger to the user.

sequence vs color

Additional ideas/notes on color:

grey scale colors

Using a monochromatic scale can help give the user a sense of completeness based on darkness/lightness but when comparing the colors to one another (such as in a grid) it is harder for users to quickly distinguish differences in shade.

grey and color

Using 2 distinct colors may be useful because in your case you have 2 distinct scenario. A) an item is not in progress B) status of that progress. Using grey which is often used for disabled items would be useful for the "Not yet started" and "Active but paused" statuses while another color such as blue (or green) could be used to indicate "Active" and "Complete"


Many programs use red, green, and yellow in these situations. I personally think this seems to be done out of habit. Green tends to mean "good" or "ok", Yellow traditionally means "danger" but its often used as an in between status, and Red means tends to be attention getting as in "danger" or "look here". Often times red can also be used to shame users such as "look at what isn't done".


ROYGBIV can also be used but it is much better for showing scale rather than a sequence and can often get confused with the traditional red, yellow, green meanings.

neutral colors

There are more neutral colors to use like grey, blue, pinks, and purples but many people avoid and dislike pinks and purples.

Other factors to consider are having enough contrast so that people can read your text (if there is text on the color). Here are some web color checkers:

  1. http://webaim.org/resources/contrastchecker/
  2. http://jxnblk.com/colorable/demos/text/

Other factors play in as well such as how the color is being presented and is it being repeated in different forms throughout the application. It might even be user to just show a user the sequence and use one color to indicate where in the sequence it is.

enter image description here

Sorry if this is all too fundamental. I can't quite tell what "(ass augmentation, only, to text)" means. If all you are trying to do is change the color of the text I strongly recommend not using blues since they are typically used for hyperlinks. I can't tell if you are going to apply these colors directly to the text such as in a list or apply the color to other text, like a title to use as an indicator. It's just important to note that using color alone as an indicator is discouraged by web accessibility standards since those with color sensitivities such as color blindness may not be able to pick up the indicator based on color alone. http://webaim.org/standards/508/checklist

| improve this answer | |
  • 4
    +1 for the use of Comic Sans on a genuine, fully worked example XD – adolf garlic Apr 10 '18 at 12:18
  • This answer could be improved by providing a clear recommendation or two at the top. – Crowder Jun 18 at 15:17

When coloring for status, rather than to invoke mood, here is some common colors:

Find a great list of color meanings here

  • Light Grey, associated with something that is neutral and not doing any actions
  • Blue, associated with non-critical, basic information
  • Yellow, associated with a warning, or a non-critical message before an action
  • Green, associated with success and completion
  • Red, associated with an error, or a critical message

Taking that into account, given this project, here is what we could do:

  • Not Started Yet: light grey
  • Active: bright blue
  • Active, but paused: lighter shade of blue to invoke a disabled look to show that it's no longer running any actions
  • Complete: light green
| improve this answer | |

This does not directly answer the question, but an interesting approach to status is not only showing text and color. You could indicate all the steps (states) involved using indicators similar to this image status progress

Some pros:

  • The user is always aware of all the steps, and which state she is currently in
  • Combining different colors with the steps add an extra level of awareness

Some cons:

  • Space, you need more space to display it in your application
| improve this answer | |
  • 1
    I like this as well. I think it might not be perfect for this use case as 'active, but paused' is not a forward step in relation to the progress from 'not yet started' to 'completed'. I think that for logical consistency the paused state may require a different form of indication. What comes to mind is using colour only to distinguish between paused and unpaused states and using steps otherwise. – Andre Dickson Jan 8 '19 at 8:01
  • @AndreDickson Yes, I agree, and I like your addition. The pause state could use a «pause icon» like the one used in audio and video applications. It is a widely known icon and convey the «pause» meaning quite well I think. – John Jan 8 '19 at 8:39
  • Great idea to add the steps – Crowder Jun 18 at 15:18
  • Bad idea to use green for "active" – Crowder Jun 18 at 15:19

You can spell it out rather than having traffic lights. There are a set of visual representations that conform to global standards (like traffic lights). I would recommend to let the user know the status rather than understanding the color definitions. Meaning, words are "sometimes" more powerful than visual cues.

| improve this answer | |

I use the following colors for project status:

  1. Dark Grey - Cancelled
  2. Blue - Completed
  3. Green

    3a. Dark Green - Future (2 - 3 months) - on track

    3b. Bright Green - Action required / Imminent (next month, next)

  4. Yellow - Warning

  5. Red - Threat / Danger
  6. No Color - Normal
| improve this answer | |
  • what color is "no color"? – Crowder Jun 18 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.