Colors

Color values can be represented in several different ways in CSS.

Hexadecimal Notation

Hexadecimal RGB (red, green, blue) notation is perhaps the most common format. It consists of a # character followed by three or six hexadecimal digits. When six digits are provided, the first pair represents the red value, the second pair represents the green value, and the last pair represents the blue value: #rrggbb. A value with three digits represents the corresponding six-digit value where each digit occurs twice; thus #09f is the same as #0099ff (red=00, green=99, blue=ff).

Decimal Notation

We can also write a color value with decimal functional notation—rgb(0, 160, 255) or rgb(0%, 63%, 100%)—where the order of the arguments is red, green, and blue. Using the first form, 255 corresponds to 100%. Values outside the valid range (0–255 or 0%–100%) are automatically changed to the corresponding limit.

CSS3 makes a few extra functional notations available:

  • rgba(0, 160, 255, 0.2) for RGBA colors; the fourth argument is the alpha opacity and accepts a value from 0 to 1
  • hsl(240, 100%, 50%) for HSL colors (hue, saturation, luminosity)
  • hsla(240, 100%, 50%, 0.2) for HSLA colors (hue, saturation, luminosity, alpha)

At the time of writing, these three notations were supported only by the Gecko1 and WebKit2 rendering engines.

Keywords

Colors can also be represented by the keywords listed in Table 1.

Table 1. Color Keywords
Keyword Color Value
aqua #00ffff
black #000000
blue #0000ff
fuchsia #ff00ff
gray #808080
green #008000
lime #00ff00
maroon #800000
navy #000080
olive #808000
orange (added in CSS 2.1) #ffa500
purple #800080
red #ff0000
silver #c0c0c0
teal #008080
white #ffffff
yellow #ffff00
CAUTION: Color Keyword Compatibility

Support for color keywords differs between browsers so, to be on the safe side, it’s best to use the numeric or functional notation. The use of keywords for colors is also disallowed by the Web Content Accessibility Guidelines (WCAG) 1.0.

Finally, you can use the keywords listed in Table 2 to specify system colors—various colors that are used by the operating system and/or window manager, and can be applied when you want to create a “native application” look and feel.

Table 2. System Colors
Keyword Description
Background the desktop background color
ButtonFace the face color for 3D elements
ButtonHighlight the highlight color for 3D elements
ButtonShadow the shadow color for 3D elements
ButtonText the text color on buttons
CaptionText the color of captions, scrollbar arrows, etc.
GrayText the color of disabled text
Highlight the color of selected items in a control
HighlightText the text color in selected items
InactiveBorder the border color of an inactive window
InactiveCaption the caption color of an inactive window
InactiveCaptionText the color of text in an inactive caption
InfoBackground the background color in tooltips
InfoText the text color in tooltips
Menu the menu background color
MenuText the menu text color
Scrollbar the color of the scrollbar “trough”
ThreeDDarkShadow the dark shadow color for 3D display elements
ThreeDFace the face color for 3D display elements
ThreeDHighlight the highlight color for 3D display elements
ThreeDLightShadow the light shadow color for 3D display elements
ThreeDShadow the dark shadow color for 3D display elements
Window the window background color
WindowFrame the color of the window frame
WindowText the color of text in windows

Note that even though the keywords are case insensitive, they’re presented here as they are in the CSS2.1 specification, for maximum readability.

CAUTION: System Color Keyword Compatibility

The support for these keywords is even less reliable than that provided for the “regular” color keywords. You should test your document extensively—in different browsers and different operating systems—if you use them.

Footnotes

1 Gecko is used by Firefox, Mozilla, and Camino, among others.

2 WebKit is used by Safari and Chrome.

User-contributed notes

There are no comments yet.

Related Products