CSS3 guide: 5.2. named colors

This is a post in a series, please see the Table of Contents [webmasterworld.com] for the other posts in the series.

5.2. named colors

Colors in CSS3 can be either a number of numerical values or from a number of sets of named values.

These named values are the HTML4 named colors, the SVG color keywords, and the 'tranparent' and 'currentColor' keywords.

HTML4 named colors

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow

Note that CSS2.1 named color orange is missing from this list in the standard.

Is the omission of orange intentional (if so: why?) or is it an oversight ?

SVG color keywords
These are actually the X11 named colors and there are a lot of them. So "bleachedalmond" and "hotpink" are now valid color names along a whole bunch of others.

Orange is included here, so the omission above might not mater all that much as long as browsers implement it all

inherit (CSS2.1)

Inherits the foreground color from the parent

While this is part of CSS2.1, it never was very popular as the legacy IE versions didn't implement this.

tansparent (CSS2.1)

Sets the color of the foreground to be fully transparent.

currentColor

This keyword sets tohe color to the foreground color of the element. If used as foreground color it has the effect of "inherit".

CSS2 System Colors
The CSS2 system colors are now DEPRECATED in favor of the appearance property [w3.org] in the CSS3 User interface module.

Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>test</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      li {
        color: black;
      }
      span {
        width: 100px;
        height: 100px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>html4 color: <span style="background-color:red">red</span></li>
 
      <li>svg color: <span style="background-color:cornflowerblue">cornflowerblue</span></li>
 
      <li style="background-color: yellow">transparent color:
      <span style="border: 1px solid black;background-color:transparent">
      transparent background</span></li>
 
      <li>inherit: <span style="border: 1px solid black"><a href="#"
      style="text-decoration:none;color:inherit">inherited black link</a></span></li>
 
      <li>currentColor: <span style="color: green; border: 3px solid currentColor">green
      border</span></li>
    </ul>
  </body>
</html>

Support:

currentColor

Supported in most recent standards compliant browsers
Not supported by IE (including IE8)

inherit

Supported in most recent standards compliant browsers
Not supported by IE < 8 (excluding IE8)

need to test SVG colors better.
(pink is too easy)

Graceful fallback:

Mostly one can find a color (be it numeric) that fits the need and use that in the conditional comment.

IE8.js adds support for inherit in IE6 and IE7

Practical use

Named colors are easier to remember than numeric colors. inherit and curentColor can be used to get a color from another setting or from a parent enhancing the code quality of the CSS and facilitating changes once a site is life

CSS3 guide: 5.2. named colors

swa66

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week