• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Springtime > Color Options in CSS

Color Options in CSS

Fortunately, CSS offers many options in terms of color values. We can use any of the following:

  • Color names. There are now 17 name values available for your use in CSS: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua, and orange. Example:

    color: orange;
  • RGB values (literal). You can use the literal numeric red, green, and blue values for a color—in this case, a light blue. These can be found in Photoshop (FIGURE 3) or your image-editing program of choice:

    color: rgb(51,153,204);

    Figure 3. Finding RGB information in Photoshop.

  • RGB values (percentages). Simply blend red, green, and blue percentage values to make the color you want—in this case, violet:

    color: rgb(93%, 51%, 93%);
  • Hexadecimal values. These are six-digit hexadecimal values, which can be found in Photoshop (FIGURE 4) as well as numerous online references. They are alphanumeric, with each value pair corresponding to an RGB value. The hexadecimal color system has been in use on the Web for a very long time, so most readers will be familiar with it:

    color: #0000FF;

    Figure 4. Using Photoshop’s Color Picker, which displays hexadecimal values.

  • Hexadecimal shorthand values. Shorthand can be used only in cases where each value pair is the same; for example, #FF6699 can be made into shorthand, but #808080 cannot. The blue example above fits this requirement, resulting in the following CSS:

    color: #00F;
  • System colors. This is a set of keywords, allowed in CSS 2.1, that give the designer the option to use the colors on the visitor’s computer. Example:

    color: WindowText;


For more information on system color keywords, see www.w3.org/TR/CSS21/ui.html#system-colors. Note that these colors will not be part of the CSS 3.0 color module.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint