Question

I have two color values in HSI (Hue Saturation and Intensity) and I want a number which represents the visual difference between the two colors. Hue is a number between 0 and 360 inclusive. Saturation is 0 to 1 and Intensity is 0 to 1.

Lets consider for example Red and Blue at Saturation of 100% and Intensity of 100%. At this website is a way to display the color by entering in the following text.

red is: hsv 0, 100%, 100%

blue is: hsv 240, 100%, 100%

enter image description here

Clearly these are two very different colors, and so a simple way I could try to calculate the difference between colors is to use the Hue component and calculate the absolute difference in hue which would be 120 (360-240) since 360 is also equal to 0 in hue.

The problem arises where the Saturation or Intensity is very dark or light, consider a very dark red and blue.

dark red is: hsv 0, 100%, 20%

dark blue is: hsv 240, 100% 20%

enter image description here

Obviously the visual difference between these two colors is less than the bright red and blue colors, as a human would state if asked to compare the differences. What I mean here is, ask a friend "Which pair of colors is most different?" they will likely say the top bright red blue.

I am trying to calculate the difference between two colors as a human would notice. If a human being looked at two colors a and b, then two colors c and d, he could notice which ones are the most different. Firstly if the colors are bright (but not too bright) then the difference is hue based. If the colors are too bright such as white or too dark such as black or too grey then the differences are smaller.

It should be possible to have a function diff where x=diff(a,b) and y=diff(c,d) yields x and y, and I can use x and y to compare the differences to find the most different color or least different color.

Was it helpful?

Solution

The WCAG2.0 and 1.0 guidelines both make reference to different equations on perception of color difference:

  1. contrast ratio (http: //www.w3.org/TR/2008/REC-WCAG20-20081211/Overview.html#contrast-ratiodef)

  2. brigtness difference and 3. color difference (http://www.w3.org/TR/AERT#color-contrast).

I tried the Delta-e method(http: //colormine.org/delta-e-calculator/) but it is quasimetric so the difference measurement may change depending on the order you pass the two colors. If in your example you expect diff(a,b) to always equal diff(b,a) then this is not what you want(there may be different algorithms under this name that aren't quasimetric but I haven't looked into it past that site).

I think that the color difference metric is the closest to matching my expectations of color difference measurements. For your example it will yield that diff(a,b) > diff(c,d)

You can test it out for yourself using the tool at this website: http://www.dasplankton.de/ContrastA/

OTHER TIPS

The general answer seems to be what David van Driessche said, to use Delta E. I found some Java code here: https://github.com/kennyliou/GAI

This is a answer to the question, may not be the best answer.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top