A Precise CSS3 Color Table

Published 12 years, 6 months past

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.

As always: share and enjoy!

Comments (12)

  1. Ah, I love how you delve into the most obscure and undocumented areas of CSS!

  2. Brilliant. A suggestion on presentation: options to reorder the list so it’s not only by alphabetical color name but closer to a rainbow or the typical palette view.

  3. Super helpful, thanks!

  4. That’s definitely on the to-do list, mt.  When sorting by hue, would you subsort by lightness then saturation, or the other way around?

  5. Wow and just wanted to mention I saw two instances for slategrey

  6. Look again, Jim. Look closer.

  7. Don’t get me wrong, this table will be very useful. But for some reason I’m seeing doubles of some of the colors.

    I viewed the page on FireFox 12 and Opera Mobile 12. I’m assuming its a browser quirk.

  8. It’s not a browser quirk. They’re the same color, but not the same keyword. SVG took the X11 colors and internationalized a few of them, which are the ones you’re seeing.

  9. Eric (#4):

    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.

  10. 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.

  11. Keeps getting better, Eric. Thanks.

  12. About that sort – do all at once is one solution:

    sorter.sort(function(a,b){
	var x = a.red - b.red;
	if ( x === 0 ) {
		var y = a.green - b.green; 
		if ( y === 0 ) {
			return a.blue - b.blue;
		} else {
			return y;
		}
	} else {
		return x;
	}
});

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview