We all know that CSS colors can be declared using hex, RGB, RGBA, HSL, and HSLA. But colors in those forms are not very memorable (unless they’re greys or something).
While I’m sure we all know that common colors like red, green, blue, etc. can be declared by name, CSS has quite a few not-so-conventional color names. Here are a bunch (camel-cased for readability), with their colors represented as backrounds on each paragraph.
AliceBlue
BlanchedAlmond
BurlyWood
CadetBlue
Chartreuse
DarkGoldenRod
DeepSkyBlue
FireBrick
Gainsboro
Honeydew
LavenderBlush
LemonChiffon
LightGoldenRodYellow
MediumAquamarine
MintCream
NavajoWhite
OldLace
OliveDrab
PapayaWhip
PeachPuff
Peru
SaddleBrown
Thistle
WhiteSmoke
I think the most bizarre name is “NavajoWhite” because, well, it doesn’t look anything like white. :)
Crockford has a complete list here, if you’re interested.
If you are using CSS2, you should only use the colors listed in the spec. CSS3 defines the same colours as well. You can also use “system colors” in CSS2 which are defined relative to the users environment (though deprecated in CSS3).
The colours listed are extended colors in CSS3, and you shouldn’t need to use JavaScript to see them. They may not work as expected in older browsers or on odd systems. It’s probably safer to not use color names outside the non-extended list.
Speaking of JS, you shouldn’t need it to submit comments either. (Also, if someone does not have JS enabled, and submits, and then enables JS, and resubmits, you shouldn’t detect that the comment is a duplicate. Bah. )
CSS colors are never dependent on JS. I’m not sure what you were referring to when you said that…?
The JS/comments thing is due to an anti-spam plugin that I’m using. Unfortunately, if I don’t use that plugin, then I get hundreds of spam comments every day. And if any legit comments get into those, then I have to wade through hundreds, maybe thousands of comments every week, just to salvage those few false negatives.
So, I can either make the comment form 100% usable for that extra 2-3% of people that don’t have JS enabled and deal with 1000s of spam comments, or I can do it this way and require JS for comments.
If anyone has a better solution, I’m all ears. :)
Not sure what Michael was talking about with the CSS colours and JS, but I’m surprised that you’ve not got any fallback for your javascript commenting. At least you’re not using CAPTCHAs, but have you looked into other alternatives like honey pot fields (http://haacked.com/archive/2007/09/11/honeypot-captcha.aspx)?
It provides a fallback should a non-javascript user try and comment! Just an alternative as you asked haha!
Brilliant information on CSS by the way, I’ve been reading a few of your articles on the slightly more obscure features of CSS and they’ve been very useful!
Thanks, Andrew. My info is certainly not perfect, but I’m glad you find it useful.
And thanks for the link. I believe I have seen that page before. I’ll have a look when I get a chance, but I’m not even sure if that would be compatible with WordPress, or if I’d have the patience to figure it out. :)
I guess it would be a good idea for me to disable the comment form for JS-free users, because it’s probably annoying to type a comment then realize it won’t submit. Thanks again!
I for one love these. While for a client project I’ll always rely on hex, I really want to start using some of these names for personal projects. They’re not efficient, or super intuitive, but there is something downright charming about using these great names.
Good list, happy to see some of my favourites here too!
Some awesome colours, i personally like AliceBlue and Honeydew
I love this one in all its shades and tones: colllor.com/coral.
This article just blew my mind haha!
You’re on a roll this week with useful information. Thanks.
Any French will recognize the Chartreuse green, who’s name comes from this liqueur:
http://en.wikipedia.org/wiki/Chartreuse_%28liqueur%29
I’m a little confused by the first comment, do these only work in browsers that support CSS3? Or would these colors work in, say, IE7?
I’ve tested these in IE7/8 and they work fine. I don’t see any proof of what that person is saying. According to this article:
So I think it’s safe to use these color names and not have to worry about lack of browser support.
Interestingly, the old WCAG spec says:
But the latest version of that document doesn’t seem to have a warning about that anymore.
Awesome, thanks for getting back to me on that! Much appreciated!
Colors are awesome. I will use when I work with css. Thanks for sharing.
DeepSkyBlue is nice
I didn’t know about these CSS coloir names. Interesting. Might roll them into my tool.
Thx.
Louis Lazaris thanks for the post i pefer white smoke!!
only hex – only hardcore )
Thanks to this article I decided to create a game for other coders out there. It helps to memorise these colour names so they could be used as placeholders values. Injecting little fun into mundane coding.
The Github link is as follows: https://github.com/nasiratt92/WDI-project-one
My fav has to be azure.