Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

From looking at the Hex values green "008000" and forestgreen "228b22" seem to be more different from each other than seagreen "2e8b57" and forestgreen "228b22"

If simply add up the difference by counting every step from 008000 to 008001 and 0f8000 to 108000 as one point between green and forestgreen I get 79. When I count the difference between seagreen and forestgreen I get 65.

If I however subjectively look at the color it seems like seagreen and forestgreen are easier to distinguish from each other than green and forestgreen.

Is there a way to calculate how easy it is for average humans to distinguish two colors given the hex values of both colors?

green forestgreen seagreen

powderblue and lightsteelblue differ by the same metric by only 36 but look to me even more distinguishable than those shades of green above.

powderblue lightsteelblue

share|improve this question
    
Just as a side note, you can't just "count" the differences. The hex values are ordered by RRGGBB, so you'd need to look at each slice separately. –  Jeremy Jul 27 at 14:57
4  
@Jeremy: I do look at each slice separately for the values I calculated. –  Christian Jul 27 at 15:19

1 Answer 1

Rather than RGB values, color perception is better represented as three alternative dimensions, one being darkness, and the other two being the color wheel. The other thing is that human perception does not linearly follow RGB values, so you have to apply some empirically determined transformations. Color differences are then proportional to the Euclidean distances between each color plotted in this three-dimensional space.

Fortunately, the folks at CIE have figured it all out for us already. I provided the necessary calculations in my answer to a related (but, IMO, distinct) question, “What research, patterns or techniques will help me choose the correct colors (or saturations) to the various UI elements of a page?”

Using these calculations, “green” (0 128 0) and “forestgreen”(34, 139, 34) differ by 4 (very small). “Seagreen” (46, 139, 87) differs from “green” by 25 (rather small) and from “forestgreen” by 26 (still rather small). For comparison, black and white differ by 100.

share|improve this answer
1  
That metric seems to be better than the one I tried but it still gives some answers that seem wrong to me. It gives only a difference of 16 for ivory (fffff0) via gainsboro (dcdcdc) and papayawhip (ffefd5) via mistyrose (ffe4e1) which look easily distinguishable to me. On the other hand 24 for red (ff0000) and orangered (ff4500) where I have a hard time telling the two apart. –  Christian Jul 28 at 12:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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