Named Colors in HTML/CSS

There are 147 color names defined by the W3C html specification. You can experience them in all of the glorious combinations of these colors on this page. I've started you out with this lovely random combination. You are welcome to try out any color combination you choose.

Select new colors

text color:
bgColor color:
link color: (sample link)

There are a few color names that specify the same colors. All of the variations of “grey” have a corresponding “gray”. These corresponding color names should render exactly the same.

Internet Explorer Oddities

A few unexpected behaviors were observed when running this web page on IE 7.0:

  1. If you are using IE, the following color names don't render correctly:

    • darkgrey
    • dimgrey
    • grey
    • lightgray
    • lightslategrey
    • slategrey

    Fortunately, there is a corresponding color name for each of these colors that does render correctly in IE:

    • darkgray
    • dimgray
    • gray
    • lightgrey
    • lightslategray
    • slategray

    Oddly, all of the “grays” work except lightgray and all of the “greys” don't, except lightgrey.

    Also interesting to note that if these unsupported color names are hardcoded into the html/css, IE ignores them, but if they are set in the DOM using javascript, odd, unrelated colors are displayed. Try setting the above drop downs to any of the 6 unsupported colors to see this effect.

  2. The color of text in an anchor tag can't be set using ‘inherit’ in CSS. The color of the link text must be overridden at or below the <a> tag with a specific color. These two links illustrate the bug (make sure that the above ‘link color’ drop down isn't set to red). The link text should be red for both:

    “color:inherit;” is specified for this link text in the <a> tag and the containing <p> has “color:red;” specified

    “color:red;” is specified for this link text in the <a> tag

    It would be interesting the test whether the inherit keyword works at all, but that's a topic for another day.

Corresponding Hex Codes

For a table showing all of the color names with the corresponding hex codes, visit SVG color keywords at W3C.

How this page works

Coming soon...