Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Recently
Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

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:

  1. backgrounds
  2. borders
  3. links
  4. outlines
  5. text

According to the CSS2.1 Specification – Section 4.3.6:

A 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:

The seventeen keywords for CSS colors

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

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

  1. Roger JohanssonRoger Johansson�s site : 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 9.1 Color Contrast, 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.

  2. Mauricio Samy SilvaMauricio Samy Silva�s site : 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.

  3. Bob JonkmanBob Jonkman�s site : 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.

  4. LauraLaura�s site : 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

  5. Respiro, the logo design guyRespiro, the logo design guy�s site : 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.

© Copyright 2006 Bite Size Standards and Authors