meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

A Precise CSS3 Color Table

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!

12 Responses»

    • #1
    • Comment
    • Fri 18 May 2012
    • 1701
    Neal G wrote in to say...

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

    • #2
    • Comment
    • Fri 18 May 2012
    • 1958
    mt wrote in to say...

    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
    • Comment
    • Sat 19 May 2012
    • 0915
    Lydia wrote in to say...

    Super helpful, thanks!

    • #4
    • Comment
    • Sat 19 May 2012
    • 1332
    Eric A. Meyer wrote in to say...

    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
    • Comment
    • Mon 21 May 2012
    • 2030
    Jim wrote in to say...

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

    • #6
    • Comment
    • Mon 21 May 2012
    • 2354
    Eric Meyer wrote in to say...

    Look again, Jim. Look closer.

    • #7
    • Comment
    • Tue 22 May 2012
    • 0843
    Jim wrote in to say...

    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
    • Comment
    • Tue 22 May 2012
    • 1247
    Eric Meyer wrote in to say...

    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
    • Comment
    • Thu 24 May 2012
    • 1521
    mt wrote in to say...

    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
    • Comment
    • Fri 25 May 2012
    • 0131
    Eric Meyer wrote in to say...

    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
    • Comment
    • Fri 25 May 2012
    • 0755
    Lydia wrote in to say...

    Keeps getting better, Eric. Thanks.

    • #12
    • Comment
    • Fri 25 May 2012
    • 1503
    Priit Pirita wrote in to say...

    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;
    	}
    });
    

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


May 2012
SMTWTFS
April June
 12345
6789101112
13141516171819
20212223242526
2728293031  

Sidestep

Feeds

Extras