1

I have objects that have a number property (it's actually a percentage). I analyze these objects based on wether this property exceeds a threshold or not. I want to show these objects and color them such that the user can

  1. Quickly see which objects are above or below the threshold (by coloring them with colors that are easily distinguishable, like green and red)
  2. With a slightly longer look, tell how far away from the threshold each object's property is (by playing with the hue, or something)

Because of 2. I need to use color scales. Because of 1. I want to use 2 scales that do not intersect too much.

What can you suggest, and why ?

1

2 Answers 2

1

Green and red are easily distinguishable... if you do not have some type of color blindness. Actually, they are the least distinguishable in those cases.

You can use this tool for testing. https://www.color-blindness.com/coblis-color-blindness-simulator/

Probably think of your gradients other than primary colors.

Warm - Cool

For example, think of a gradient Red-Orange and then Blue-Cyan.

They will be more distinguishable, and nicer to the view that one color only.


One thing to consider on the middle point. Some color scales that use complementary colors, tend to have an unsaturated color in the middle, for example, gray or white. Keep that in mind, and that can easily identify that middle point.

3
  • The Warm-Cool idea was great, I just replaced blue with green. (About color blindness : this is a good point, but my target population are my work colleagues, who are few enough that I know that none are color-blind and that if any new colleague joins that is color-blind I will be informed.)
    – Charles
    Jul 5, 2022 at 7:50
  • What about "color scales that use complementary colors" with "an unsaturated color in the middle" ? What is an example ? How can it be used for my purpose ? I think it will weaken or break requirement 1., since objects around the threshold (above or under) will be close to gray, and it will be hard to see on which side they land.
    – Charles
    Jul 5, 2022 at 7:51
  • Take a look at these two posts, and see how there are different routes to take when using complementary colors graphicdesign.stackexchange.com/questions/83866/… and how a complementary color if viewed on a 3D solid, it passes thru gray graphicdesign.stackexchange.com/questions/143875/…
    – Rafael
    Jul 5, 2022 at 22:35
0

A scale that goes from red to blue (for values under the threshold, where red is the minimum value and blue is at the threshold) and from green to yellow (for values above the threshold, where green is the max value and yellow is at the threshold) seems a good start.

More precisely, in RGB :

  • Under the threshold :

    • R is how far away we are from the threshold (with 255 being at the minimum value and zero at the threshold)
    • G is always zero
    • B is how close we are from the threshold (with 255 being at the threshold and 0 at the minimum value)
  • Above the threshold :

    • R is how close we are from the threshold (with 255 being at the threshold and 0 at the minimum value)
    • G is always 255
    • B is always zero

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.