I'm designing a system where a list item can have one of 5 different status options:

  • LIVE

I want to specify a different color for every status.

For ACTIVE, PENDING and INACTIVE I decided on Green, Orange and Red.

What colors should I use for LIVE and LEGACY? You can also suggest different colors for the other statuses.

I added a tooltip on mouse hover that shows the status name.

Quick edit

After talking to our product manager, it's now clear that there is no view where ACTIVE and LIVE are in the same screen, so both of them can be Green. All others can be in the same view.


download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    What's the difference between "Active" and "Live" in your context? Generally those would both be green. On a similar note "Legacy" should be coloured based on what that actually means - is something with a status of "Legacy" still active (green) or is it inactive (red)? Commented Sep 15, 2016 at 12:54
  • If a task like this is hard it may be that your structure is not optimised for users. If your audience does not get the difference between active and live or between inactive and legacy then no amount of colour will fix it.
    – Aidan
    Commented Sep 15, 2016 at 13:16
  • It would still help to know the differences in these statuses. Indicating two different statuses with the same color, even in different places in the app can cause confusion if not handled with care.
    – saltdotac
    Commented Sep 19, 2016 at 17:18

1 Answer 1


The tooltip is a good addition, but I would also strongly suggest you find a way to use shape or icons in addition to color. Color can be tricky due to populations with colorblindness; you will want to take luminance values and contrast into consideration as well as the actual colors themselves.

You should also consider checking any color palette options using an on-line simulator such as Coblis (http://www.color-blindness.com/coblis-color-blindness-simulator/), which shows you how images look simulating various color-blindness variations.

As far as some insight into how much of an issue this can be, take a listen to an excellent story by Matt Desio from the Enterprise UX 2016 conference, in the Storytelling sessions (at about 21:00 in this video):


As for coming up with pleasing and useful color palettes, you might try one of the on-line palette generation tools available:




  • Still, what color would you use for LEGACY ?
    – dimshik
    Commented Sep 15, 2016 at 13:37
  • I'm not sure we can make that determination for you... it may depend on your overall color scheme, expectations and cultural backgrounds of your users, etc. But taking a flyer, perhaps you could use black, white, or gray for Legacy and Blue for live.
    – Mattynabib
    Commented Sep 15, 2016 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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