I was recently tasked with creating a color pallete for some custom (legacy) code for an existing e-commerce website. One of the requirements was to show the colors grouped by similar tint. I thought to myself, this is a classic sorting problem. There was a catch, though. What do we sort?
Converting from HTML Hex to HSV
Turns out, before we can do any sort of sorting, we need to convert the HTML Hex value of a color to HSV (Hue Saturation Value) format. A more detailed description of HSV can be found here: http://en.wikipedia.org/wiki/HSL_and_HSV.
To convert hex to HSV, we first have to get the RGB values. This is really easy to do.
The code is simple. Each RGB value corresponds to a two character hex code in the hex string. So we use parseInt() to get the value of the substring. We pass 16 to parseInt() to make sure it is parsed as a hex value.
Now that we have the RGB values of the hex, we can calculate the Chroma. The Chroma will be used to calculate the Hue and Saturation. From the wiki:
M = max(R,G,B)
m = min(R,G,B)
Chr = M - m
Simple enough. By default, our Hue and Saturation are 0. Both depend on the Value. In HSV format, the Value is simply the max of the RGB values:
Now, we proceed to Saturation and Hue. Depending on Saturation, we may never have to calculate the Hue. So, we should check and make sure Saturation is greater than 0. According to the wiki:
Sat = Chr/V where V is the Value
If Saturation ends up being 0, the color is somewhere between white and black (some sort of gray), so Hue will be 0. If Saturation is greater than 0, the color has some sort of tint. The Hue must be calculated. The Hue is explained very well in the wiki with diagrams. Here are the formulas:
if R is Max: Hue = (((G-min)-(B-min))/Chr)*60
if G is Max: Hue = 120+(((B-min)-(R-min))/Chr)*60
if B is Max: Hue = 240+(((R-min)-(G-min))/Chr)*60
So to get the Saturation and Hue, here is the code:
Simple enough, right? Note, that in the case where R is the Max, we must account for any wraparound 360 degrees.
Sorting by Hue
Now that we can convert HTML Hex colors to HSV, we can group similar tinted colors together. We basically sort the hex colors by Hue!
Using the code samples above, we can create a
What about Saturation and Value?
Though sorting by Hue might be good enough in most cases, sometimes you want the pallette to look even more precise. You can sort the array further by sorting by Value within each of the different Hues. Each of the different Hues lie within 60 degrees of each other (0 to 60, 61 to 120, 121 to 180, etc.).
If you would like to pull out white, black, and all gray colors, you will want to remove any colors with a saturation close to 0. I’ve found that a Saturation < .09 will usually be a safe condition to use.
An Example using
Here is a screenshot of the results of
sortColors() displayed using jQuery templates.
Unfortunately, Blogger does not do file hosting, so I can’t upload the example code. But shoot me an email and I’ll be glad to send it over.