25

Is there a way to compare how close two colors are to each other? If to say both of them are blue.
At the moment the way that we compare them is to manually assign each possible color to a color family(red, green, blue...). And then just compare the strings :)
But surely that manual task can be assigned to a neat little algorithm.

martineau
  • 119,623
  • 25
  • 170
  • 301
Tjelle
  • 986
  • 1
  • 9
  • 17

4 Answers4

22

You probably want to convert the colors to an HSL model (Hue, Saturation, Lightness) and then compare the values within thresholds in the order HSL. If the hue is within a tolerance deemed as "close", then check the "closeness" of the saturation, and then the lightness.

Jeff Yates
  • 61,417
  • 20
  • 137
  • 189
  • 1
    I think this is a better answer than David's, since without knowing otherwise I'd guess with OP will find a comparison based on HSL will be more useful than one based on RGB. – Adam Bellaire Jan 29 '09 at 16:05
  • @Adam Bellaire, can you explain why that might be? I'm not too clear on the differences between RGB and HSL myself – matt b Jan 29 '09 at 16:07
  • +1. HSL can be converted from/to RGB rather easily: http://130.113.54.154/~monger/hsl-rgb.html – Michael Stum Jan 29 '09 at 16:07
  • 1
    @matt: See my comment on David's answer. Basically, I think people naturally consider hue to be more important than saturation or lightness when comparing colors. RGB mixes these attributes in the representation, making it hard to compare numerically. HSL separates them, making it easier. – Adam Bellaire Jan 29 '09 at 16:10
  • Nice idea; but there are some corner cases you'd want to deal with, for instance, if the saturation is very low the hue doesn't matter much. If the lightness is very low, saturation probably isn't that important. – Dickon Reed Mar 07 '09 at 22:57
  • @Dickon: Good point. I think with this kind of algorithm, there are always going to be those special cases that don't quite fit the model. – Jeff Yates Mar 08 '09 at 08:33
  • Use this [HLS color-picker tool](http://www.workwithcolor.com/hsl-color-picker-01.htm) to compare many colors. – Beau Smith Jul 12 '12 at 00:08
10

Delta-e, is a single number that represents the perceived 'distance' between two colors. The lower the number, the more similar the colors are to the human eye.

There are a few different ways to calculate it...CIE76 (aka CIE 1976 or dE76) being the most popular.

Each one goes about things in a different way, but for the most part they all require you to convert to a better (for comparison) color model than RGB.

For CIE76 you basically just convert your colors to the LAB color space, then compute the 3 dimensional distance between them.

Wikipedia has all the formulae: http://en.wikipedia.org/wiki/Color_difference

You can check your work with online color calculators:

Joe Zack
  • 3,268
  • 2
  • 31
  • 37
9

I'm not sure of any algorithms, you may want to consider converting RGB (Red, Green, Blue) values in to HSB (Hue, Saturation, Brightness).

Hue is essentially "color", so you can compare simply on how close the Hue values are.

See http://en.wikipedia.org/wiki/HSV_color_space

nicholaides
  • 19,211
  • 12
  • 66
  • 82
  • And what about the other dimensions? From the human perspective point of view two colors can be totally different with the same H value (e.g. red and pink). – Tibor Takács Nov 01 '17 at 17:08
  • I also initially thought so, but that does not work. If the saturation is very low it practically becomes gray scale image where the value of hue component starts mattering less. So all components have a role to play depending on values. – AppleGrew Oct 20 '22 at 10:22
3

I know this question is 10 years old but extending Joe Zack's answer:

Here is my Kotlin code

//Entry point here
//Color must be hexa for example "#829381"
fun calculateColorDistance(colorA: String, colorB: String): Double {
    val aColorRGBArray = getColorRGBArray(colorA)
    val bColorRGBArray = getColorRGBArray(colorB)
    val aColorLAB = getColorLab(aColorRGBArray)
    val bColorLAB = getColorLab(bColorRGBArray)
    return calculateColorDistance(aColorLAB, bColorLAB)
}

private fun calculateColorDistance(aColorLAB: DoubleArray, bColorLAB: DoubleArray): Double {
    val lab = aColorLAB[0] - bColorLAB[0]
    val aab = aColorLAB[1] - bColorLAB[1]
    val bab = aColorLAB[2] - bColorLAB[2]
    val sqrtlab = lab.pow(2)
    val sqrtaab = aab.pow(2)
    val sqrtbab = bab.pow(2)

    val sum = sqrtlab + sqrtaab + sqrtbab
    return sqrt(sum)
}

private fun getColorRGBArray(color: String): IntArray {
    val cleanColor = color.replace("#", "")
    val colorInt = Integer.parseInt(cleanColor, 16)
    val r = Color.red(colorInt)
    val g = Color.green(colorInt)
    val b = Color.blue(colorInt)
    return intArrayOf(r, g, b)
}

private fun getColorLab(colorRGB: IntArray): DoubleArray {
    val outLab = doubleArrayOf(0.0,0.0,0.0)
    ColorUtils.RGBToLAB(colorRGB[0], colorRGB[1], colorRGB[2], outLab)
    return outLab
}

calculateColorDistance will return a Double value. the lower this value is the more similar the colors are.

Hope this helps someone

Aerim
  • 1,960
  • 3
  • 16
  • 28