In the course of expanding my documentation of color values, I failed to find a table that listed all 147 SVG-and-CSS3-defined keywords along with the equivalent RGB decimal, RGB percent, HSL, hexadecimal, and (when valid) short-hex values. There were some tables that listed some but not all of those value types, and one that listed all the value types (plus CMYK) along with a few hundred other keywords, but none that listed all of the CSS keywords and value types. And none that I saw used precise values for the RGB percent and HSL types, preferring instead to round off at the expense of some subtle differences in color.

So I created my own table, which you can now find in the CSS area of meyerweb. Most of it is dynamically generated, taking a list of keywords and RGB decimal equivalents and then calculating the rest of the values from there. The presentation is still a work in progress, and may change a little or a lot. In particular, if I can’t find a better algorithm for determining which rows should have white text instead of black, I’ll probably shift away from the full-row background colors to some other presentation. (Update: it’s been greatly improved, so I’m sticking with the full-row backgrounds. For now, anyway.)

My thanks to Tab Atkins for his donation of the RGB-to-HSL routine I adapted as well as help improving the pick-light-or-dark-text algorithm; and to the people who responded positively on Twitter when I mused about the idea there.

Update 25 May 12: the table now allows sorting (both directions) on the Keyword, RGB Decimal, and HSL columns. The sorting and styling code uses methods like el.classList.remove() so it may not function well, or at all, in older versions of Internet Explorer. The numeric sorts also appear to be borked in Opera and Chrome for no reason I can discern, and it’s not like I did anything fancy in the JavaScript—exactly the opposite, I’d wager. (Speaking of which, I’m sure my JavaScript is an non-stop amateur-hour horrorshow. I’m okay with that. If you aren’t, you might want to avert your gaze.) If there’s a simple fix that doesn’t screw up other browsers, like Safari and Firefox, I’m interested. If not, then we’ll all just have to live with it.

Update II 25 May 12: thanks to the folks who responded to my question over at StackOverflow as well as on Twitter, the sorting is now stable across browsers. Bonus: I feel like thanks to everything I’ve learned along the way, the JavaScript in general is getting halfway to decent. Go me.

You know, that’s an excellent question. Two-dimensional vectors are easy to tabulate and sort in screenspace. Three-dimensional ones, less so…. I personally don’t have a preference as to sort order. Would it be possible to have the user specify the sort order?

Also — and this may be too involved to code just for kicks as you have with this table — what about a color picker style dialog with sliders or even just numbers that would give the closest color keyword match to a particular RGB/HSL combination? I figure something like that would involve some ugly JavaScript, though. Eesh.

mt (and anyone else interested): I’ve added sorting to the Keyword, Decimal RGB, and HSL columns. The HSL sort order is hue, then saturation, then lightness. I know, thoroughly unoriginal, but it was the least awful of the many permutations I tried. Similarly, the RGB sort is red-then-green-then-blue, which seems no better or worse than the others I tried.

If anyone has suggestions for interesting sort patterns, let me know, but do be specific.

I’ll update the post tomorrow to mention the new features, but for now I must sleep.