Calculate the apparent difference in color between two HSI color values

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.

I doubt there is an exact answer to this. You can try RGB color space, seems it's easier to tell the difference. — xiaoyi
I did some google searching and found a color difference algorithm emanueleferonato.com/2009/09/08/…, Also there is a Wikipedia article on this color difference en.wikipedia.org/wiki/Color_difference there must be lots of ways to work this out — Phil
I have a professional background with printing / proofing and the traditional way to calculate color differences there is Delta E. You find a Wikipedia article here: en.wikipedia.org/wiki/Color_difference — David van Driessche
@Phil In RGB -> HSI, 100% intensity if only obtained if you have pure white in RGB. So your examples regarding red and blue are wrong. Now, going to CieLAB to find the distance between colors is commonly accepted as a better method, but for your applications it might suffer to use some metric in HSI. I will later include an answer attempting to show that. — mmgp

Ethan O Brien Ethan O Brien · Accepted Answer · 2015-01-25T00:07:19

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

contrast ratio (http: //www.w3.org/TR/2008/REC-WCAG20-20081211/Overview.html#contrast-ratiodef)
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/

Calculate the apparent difference in color between two HSI color values

2 Answers