CSS values for colors

MaurÃcio Samy Silva | 23 March 2007

In this article we will explain how to specify colors for a CSS property that accepts color values.

The following elements can display colors values defined via CSS:

backgrounds
borders
links
outlines
text

According to the CSS2.1 Specification – Section 4.3.6:

A <color> is either a keyword or a numerical RGB specification.

The list of color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. These 17 colors have the following values:

In addition to [the above] color keywords, users may specify keywords that correspond to the colors used by certain objects in the user's environment. Please consult the section on system colors for more information.

~ CSS2.1 Specification

Syntax examples for colors values

For example, if you wanted to specify a red color for text in a paragraph you could do it using any of the following methods:

Color Names: p {color:red;}
Hexidecimal: p {color:#ff0000;}
Short-hand Hexidecimal: p {color:#f00;}
RGB: p {color:rgb(255, 0, 0);}
RGB percentages: p {color:rgb(100%, 0%, 0%);}

As you might've noticed we used two hexadecimal syntaxes in the above examples. For CSS colors values you can use a shorthand hexadecimal notation. When the hexadecimal notation consists of three matching pairs it is perfectly valid to use only one digit representing a pair (i.e. #xxyyzz is the same color as #xyz).

Be aware, however, that some colors do not have shorthand notations. For example there isn't a shorthand notation for the #808080 hex color.

System color values

The System colors are deprecated in the CSS3 Color Module. For further information see CSS2.1 Specification – Section 18.2.

References

Permanent link | Filed under: Cascading Style Sheets (CSS)

About the Author

Maurício Samy Silva (AKA: Maujor) is a web standards advocate located in Rio de Janeiro, Brasil. When he is not writing tutorials and articles on his CSS para Web Design site or on Maujor’s Blog he can be found on the floor, driving cars, trains, trucks, dolls, and all sort of boy’s and girl’s toys with his four years old grandson and granddaughter.

Articles by MaurÃcio Samy Silva

5 Comments

| Post a comment | Comments Feed

Roger Johansson : http://www.456bereastreet.com/

24 March 2007, 21:34 : Permanent link to comment

I’d just like to add that according to the W3C Note CSS Techniques for Web Content Accessibility Guidelines 1.0, section <a href=“http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-color-contrast”>9.1 Color Contrast</a>, you should not use names for colours. I’m not sure exactly why or how relevant it is, but it’s good to be aware of.
Mauricio Samy Silva : http://www.maujor.com/

25 March 2007, 00:05 : Permanent link to comment

Well noted Roger.
It would be great if somebody from WAI could clarify this issue for us.
Bob Jonkman : http://sobac.com/sobac/colors.htm

28 March 2007, 18:00 : Permanent link to comment

I’ve created a table listing the various colours in both background and foreground to make it easier to determine contrast and readability. Unfortunately, I’ve used colour names instead of hex values.

I’m sure there are other charts like this. I invite anyone with a higher bandwidth connection than mine to copy it and protect my poor little server from collapse.

—Bob.
Laura : http://

29 March 2007, 18:14 : Permanent link to comment

Ref: CSS Techniques for WCAG 2.0

7.2 Specifying color values by hex value or color name (optional)

http://www.w3.org/TR/2005/WD-WCAG20-CSS-TECHS-20050630/#color-as-hex
Respiro, the logo design guy : http://www.relogodesign.com

2 April 2007, 12:58 : Permanent link to comment

Here’s w3.org’s recommendation:

“Use numbers, not names, for colors:
H1 {color: #808000} H1 {color: rgb(50%,50%,0%)}”

Commenting is closed for this article.