Distance measure between HSL colours

Question

I am coding a program that allows a user to choose various foreground and background colours in RGB. I want to not allow them to chose foreground and backgrounds that are too similar and decided to convert to HSL and use HSL euclidean distance as a way to check for similarity.

Is there a good weighting to use for HSL space (rather than equal weighting for H, S and L)? I've looked at various sites and not found the exact thing I need; just things saying that HSL or HSB is better than RGB.

Answer 1

I don't have exact figures for you, but I'd use a much higher weight for L than H or S. The eye is bad at discriminating between equal colors of different saturation, and nearly as bad at distinguishing different hues - expecially if it's fine detail you're trying to see, like text.

Answer 2

I just concluded an interesting study into color spaces. As others mentioned here, converting RGB to CIE-Lab and doing a Delta E computation will give you perceptual color distance. It produces okay results.

My goal was to find the closest index in a limited color palette. However, I found using CIE-Lab Delta E calculations ended up with "wrong" colors. Particularly grayscale would wind up getting too much saturation and select a red instead of a gray from the palette but other colors had issues too (I don't remember which ones). For better or worse, I wound up weighting hues at a 1.2x multiplier, saturation at 1.5x, and B values at either 1.0x or 2.0x depending on the direction. The results more or less work out better than just Delta E alone.

Calculating the distance of Hue is a bit tricky since it is a circle. For example, Hue 0 and Hue 359 are a distance of 1. The solution is to select the minimum of two different distances.

Here's my code based on the above:

    // Finds the nearest color index in a RGB palette that matches the requested color.
    // This function uses HSB instead of CIE-Lab since this function is intended to be called after GetReadableTextForegroundColors() and results in more consistent color accuracy.
    public static function FindNearestPaletteColorIndex($palette, $r, $g, $b)
    {
        $hsb1 = self::ConvertRGBToHSB($r, $g, $b);

        $result = false;
        $founddist = false;
        foreach ($palette as $key => $rgb)
        {
            $rgb = array_values($rgb);
            $r = $rgb[0];
            $g = $rgb[1];
            $b = $rgb[2];

            $hsb2 = self::ConvertRGBToHSB($r, $g, $b);

            $hdiff = min(abs($hsb1["h"] - $hsb2["h"]), abs($hsb1["h"] - $hsb2["h"] + ($hsb1["h"] < $hsb2["h"] ? -360.0 : 360.0))) * 1.2;
            $sdiff = ($hsb1["s"] - $hsb2["s"]) * 1.5;
            $bdiff = $hsb1["b"] - $hsb2["b"];
            if ($hsb1["b"] < $hsb2["b"])  $bdiff *= 2.0;

            $hdiff *= $hdiff;
            $sdiff *= $sdiff;
            $bdiff *= $bdiff;

            $dist = $hdiff + $sdiff + $bdiff;

            if ($result === false || $founddist >= $dist)
            {
                $result = $key;
                $founddist = $dist;
            }
        }

        return $result;
    }

Source: https://github.com/cubiclesoft/php-misc/blob/master/support/color_tools.php

Converting the above to use HSL instead of HSB/HSV shouldn't be too difficult. I prefer the HSB color space since it mirrors Photoshop, which allows me to confirm the numbers I'm looking for in software.

Answer 3

My advice would be to skip HSL/HSB entirely, and go directly from RGB to LAB. Once you've done that, you can do a standard delta E computation.

Answer 4

first convert the colors to Lab. This colorspace is designed so that the vectorial difference between any two colors closely approximate a 'subjective distance'.

In color management, a 'delta E' value is given as a measure of how perceptually faithful a given color transformation is. it's just the magnitude of the vector difference between original and final colors as expressed in Lab space.