CodeinWP CodeinWP

Weird CSS Color Names

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

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.

19 Responses

  1. Michael. says:

    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. :)

      • Andrew Bridge says:

        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!

  2. ArleyM says:

    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!

  3. Some awesome colours, i personally like AliceBlue and Honeydew

  4. Anna says:

    I love this one in all its shades and tones: colllor.com/coral.

  5. Asim says:

    This article just blew my mind haha!

  6. Jim Sacci says:

    You’re on a roll this week with useful information. Thanks.

  7. kim says:

    Any French will recognize the Chartreuse green, who’s name comes from this liqueur:
    http://en.wikipedia.org/wiki/Chartreuse_%28liqueur%29

  8. 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:

      A particular browser may not recognize all of these colors, but as of 2005 all modern general-use browsers support the full list of colors.

      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:

      Use numbers, not names, for colors.

      But the latest version of that document doesn’t seem to have a warning about that anymore.

  9. Anita says:

    Colors are awesome. I will use when I work with css. Thanks for sharing.

  10. Finch says:

    DeepSkyBlue is nice

  11. I didn’t know about these CSS coloir names. Interesting. Might roll them into my tool.

    Thx.

  12. suresh says:

    Louis Lazaris thanks for the post i pefer white smoke!!

  13. only hex – only hardcore )

  14. Mohammed says:

    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.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).