1. Overview

In this tutorial, we’ll talk about computing the similarity between two colors. First, we’ll discuss the importance of having proper metrics for color similarity, and then we’ll present three methods for computing color similarity starting from the simplest to the most complex.

2. Importance

Nowadays, color modeling is an indispensable part of many applications, and colors are represented by a variety of color spaces like RGB, HSV, and HSL. The quantification of the similarity between colors is of great importance since it enables us to quantify a notion that was previously mostly described with adjectives.

As we’ll see below, computing color similarity is not a straightforward procedure since we cannot rely on classical proposed metrics to compare colors. Alternatively, we have to modify the equations of classical metrics in order to compute color similarity as perceived by humans.

To better understand the below approaches, we’ll define three colors with RGB values C_1 = (255, 102, 102), C_2 = (255, 178, 102) and C_3 = (255, 204, 255). Below, we can see the three colors:


3. Simple Approach

The simplest approach is to apply a standard way of calculating distances in the RBG values of the color, like the Euclidean distance. For two given colors defined in RGB space as (R_1, G_1, B_2) and (R_2, G_2, B_2), the euclidean distance is defined as:

d = \sqrt{(R_1 - R_2)^2 + (G_1 - G_2)^2 + (B_1 - B_2)^2}

In most cases, we can also avoid the square root and just compute the sum of differences between the RGB values.

If we apply the above equation in our previous colors we have:

d(C_1, C_2) = \sqrt{(255 - 255)^2 + (102 - 178)^2 + (102 - 102)^2} = 76

d(C_1, C_3) = \sqrt{(255 - 255)^2 + (102 - 204)^2 + (102 - 255)^2} = 184

That means that C_1 is much closer to C_2 than C_3. However, this is not in accordance with our visual perception.

Despite its simplicity, this approach presents a serious flow since it does not account for the fact that humans perceive colors differently from the way colors are represented in the RGB color space. It is widely known that the human eye is more tolerant of some colors than others. So, visually similar colors may give us a greater RGB euclidean distance than colors that look much different to us.

4. Improved Approach

An improvement to the above algorithm is to weigh RGB values to better fit human perception. The weights are computed experimentally, and the most common weights are 0.3 for Red, 0.59 for Green, and 0.11 for Blue.

So, the weighted euclidean distance distance between two colors defined in RGB space is defined as:

d = 0.3 \times (R_1 - R_2)^2 + 0.59 \times (G_1 - G_2)^2 + 0.11 \times (B_1 - B_2)^2

If we apply the above equation in our previous colors we have:

d(C_1, C_2) = 0.3 \times(255 - 255)^2 + 0.59 \times(102 - 178)^2 + 0.11 \times (102 - 102)^2 = 45

d(C_1, C_3) = 0.3 \times(255 - 255)^2 + 0.59 \times(102 - 204)^2 + 0.11 \times (102 - 255)^2 = 77

As before, C_1 is much closer to C_2 than C_3 but their difference is not so large.

5. Best Approach

Although weighted euclidean distance gives us a better estimate of color similarity, it is still not able to distinguish colors as humans do.

One of the best approaches to color similarity is to use the CIELAB color space that represents color using three values, namely:

  • L^\star for perceptual lightness and
  • a^\star and b^\star for the four unique colors of human vision: red, green, blue, and yellow.

This model approximates very closely the way humans perceive colors where the L^\star component closely fits the human perception of lightness. So, the first step in computing color similarity is to convert the color from its original color space to CIELAB. This is usually very straightforward by applying some standard predefined equations. Then, we just compute the euclidean distance in the CIELAB space as follows:

d = \sqrt{(L_1^\star - L_2^\star)^2 + (a_1 ^\star- a_2^\star)^2 + (b_1^\star - b_2^\star)^2}

where (L_1^\star, a_1^\star, b_1^\star) and (L_2^\star, a_2^\star, b_2^\star) are the values of the two colors in the CIELAB space.

This equation is a very good approximation of color similarity since colors are represented in the CIELAB color space that fits human perception.

Let’s apply this method to our example. First, we convert our three RGB colors to CIELAB as follows:

  • C_1: (R_1, G_1, B_1) = (255, 102, 102) \to (L_1^\star, a_1^\star, b_1^\star) = (6248, 4941, 2695)
  • C_2: (R_2, G_2, B_2) = (255, 178, 102) \to (L_2^\star, a_2^\star, b_2^\star) = (7521, 1790, 4220)
  • C_3: (R_3, G_3, B_3) = (255, 204, 255) \to (L_3^\star, a_3^\star, b_3^\star) = (8306, 2244, 1357)

and then we compute their distances:

d(C_1, C_2) = 3724

d(C_1, C_3) = 3646

In this case, C_1 is closer to C_3 than C_2 since we took into account the way humans perceive colors.

6. Conclusion

In this article, we presented three methods for computing the similarity between colors. First, we discussed two simple approaches that are applied in the RGB color space.

Then, we talked about the best approach that computes the distance of colors in the CIELAB color space.

Comments are open for 30 days after publishing a post. For any issues past this date, use the Contact form on the site.