CODEWITHSUNDEEP
phphexrgbhsl
user681148
user681148

Reputation: 27

Mapping hex/hsl values to a color range

Given a hex/rgb/hsl value, how could I fit that value into a custom range of say 11 basic colors like red, blue etc

The best I could do is match by eye the range of hues in hsl but saturation and lightness can change the perceived color.

Im looking for an algorithm to fit said values in a color range.

Upvotes: 0

Views: 1237

Answers (1)

Liftoff
Liftoff

Reputation: 25392

If you're only talking 11 basic colors (say red, orange, yellow, green, cyan, blue, purple, magenta, black, white, gray), I would say you're already there. Hue matching is all you'll need to match the colors themselves, as long as they're within a reasonable range of S and L.

To my eye, any L greater than 95ish is close enough to white, and any L less than 5ish is close enough to black.

Then if your S is less than say 10, your options are black, gray, and white, depending on the L, and you can even use the same rules. Black <= 5, White >= 95, otherwise gray.

To match hue then, using my example color list, you can't really use a uniform range, since the differences between colors on the red end of the spectrum are much smaller than those on the cyan end. You could either define them by hand or you might be able to get pretty good results using a logistic function.

TL:DR; Math stuff, probably overkill.

I would just eyeball the hue as making a formula for this is unnecessary and complex.

With that said, here's my attempt at a logistic function that matches perception of common colors.

formula

You can tweak the k value to whatever you want. I think 1.1 gave a reasonable spread (although I only tried a couple values). The 8 gives you the number of values you would want to get out of this function. So since we have 8 different colors we're trying to match (in addition to black, white, and gray), I used 8.

The 3 shifts the domain to the right by 3 units. I used 3 because it is half of the domain we are going to use for this function (3 units on either side of the midpoint).

To clarify, this is the final function:

final

For x, this formula is tuned to have a minimum of 0 and a maximum of 6, and it would start at cyan. So if 0 <= f(x) < 1, it's green; if 1 <= f(x) < 2 it's cyan, etc.

Since it starts at cyan, you have to tweak your hue input value so that 0 is equivalent to the very edge of what you consider cyan and not green. Let's go with 150 for this example. This means that cyan has a width of 60 degrees, which is where I got the 1.1 K value from, since that lines up pretty well.

So then our x value would be x = ((hue + (360 - 150)) % 360) / 60.0 or x = (hue + 210) % 360) / 60.0

We can then plug that into our f(x) and get a number between 0 and 8 which we can use to get our suspected color. If we make an array of the colors, we can just floor the value and use it as an index, since our domain of 0-6 will give us a range of about 0.36-7.7, so it won't ever get above 8 or below 0.

[cyan, blue, purple, magenta, red, orange, yellow, green]

Is this overkill? Probably.

Is it more interesting? Definitely.

Finally, the code

function hsl($h, $s, $l){
    $options = array("cyan", "blue", "purple", "magenta", "red", "orange", "yellow", "green");
    if($l >= 95)
        return "white";
    else if($l <= 5)
        return "black";
    else if($s <= 10)
        return "gray";

    //Convert hue to x value
    $x = (($h + 210) % 360) / 60.0;
    $match = matchHue($x);
    return $options[$match];
}

function matchHue($x){
    return intval(floor(8 / (1 + pow(M_E, (-1.1 * ($x - 3))))));
}

This all depends on your use case and which colors you are trying to use, so ymmv, but if you want a formula and not a hard coded list, a logistic function like this will likely be your best bet at mirroring perceived color from hues.

Even more overkill. Because why not?

If you wanted more options with S and L, for example to have extra shades of color, you could use the same style of logistic function or even just a linear function.

Lightness will obey the very same function. Medium gray would be the largest slice of the pie, so you would set x=0 to be the lower bound of medium gray.

Saturation is more of a logarithmic function. The first 25% or so has several recognizable shades, while the upper 75% has far less. Something like

log

Where N is the number of shades to recognize. The domain of this function is 0-100 and the range is 0-N. You can tweak k to your liking to change the width of the steps, but even leaving k as 1 should give adequate results.

Upvotes: 2

Related Questions