This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

Setting color in CSS

Summary

This article explains in detail the different ways you can specify color in CSS.

Information: Color

In this tutorial so far, you have used a limited number of named colors. CSS 2 supports 17 named colors in all. Some of the names might not be what you expect:

black gray silver white
primaries red lime blue
secondaries yellow aqua fuchsia
maroon orange olive purple green navy teal
### Further color keyword details

Your browser might support many more named colors, like:

dodgerblue

peachpuff

tan

firebrick

aquamarine

For details of this extended list, see: SVG color keywords in the CSS 3 Color Module. Beware of using color names that your reader’s browsers might not support.

For a larger palette, specify the red, green and blue components of the color you want by using a number sign (hash) and three hexadecimal digits in the range 0 – 9, a – f. The letters a – f represent the values 10 – 15:

||
|black||#000|
|pure red||#f00|
|pure green||#0f0|
|pure blue||#00f|
|white||#fff|

For the full palette, specify two hexadecimal digits for each component:

||
|black||#000000|
|pure red||#ff0000|
|pure green||#00ff00|
|pure blue||#0000ff|
|white||#ffffff|

You can usually get these six-digit hexadecimal codes from your graphics program or some other tool.

Further hex examples

With a little practice, you can adjust the three-digit colors manually for most purposes:

||
|Start with pure red:||#f00|
|To make it paler, add some green and blue:||#f77|
|To make it more orange, add a little extra green:||#fa7|
|To darken it, reduce all its components:||#c74|
|To reduce its saturation, make its components more equal:||#c98|
|If you make them exactly equal, you get gray:||#ccc|

For a pastel shade like pale blue:

||
|Start with pure white:||#fff|
|Reduce the other components a little:||#eef|

RGB colors

You can also specify a color using decimal RGB values in the range 0 – 255, or percentages. For example, this is maroon (dark red):

rgb(128, 0, 0)

For full details of how to specify colors, see: Colors in the CSS Specification. For information on matching system colors like Menu and ThreeDFace, see: CSS2 System Colors in the CSS Specification.

Color properties

You have already used the [color] property on text.You can also use the [background-color] property to change elements’ backgrounds. Backgrounds can be set to transparent to explicitly remove any color, revealing the parent element’s background.

background-color: #fffff4;

The More details boxes use this pale gray:

background-color: #f4f4f4;

Action: Using color codes

  1. <p>Edit your CSS file; make the change shown here in bold, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)</p>

    /*** CSS Tutorial: Color page ***/
    
    /* page font */
    body {font: 16px "Comic Sans MS", cursive;}
    
    /* paragraphs */
    p {color: blue;}
    #first {font-style: italic;}
    
    /* initial letters */
    strong {
      color: red;
      background-color: #ddf;
      font: 200% serif;
    }
    
    .carrot {color: red;}
    .spinach {color: green;}
    
  2. <p>Save the file and refresh your browser to see the result.</li>

    </ol>

    Need to add screenshot of the result?

    See also

    Other articles

    Exercise question

    In your CSS file, change all the color names to 3-digit color codes without affecting the result (this cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)

Attributions

  • This article contains content originally from external sources, including ones licensed under the CC-BY-SA license. cc-by-sa-small-wpd.png

  • Portions of this content copyright 2012 Mozilla Contributors. This article contains work licensed under the Creative Commons Attribution-Sharealike License v2.5 or later. The original work is available at Mozilla Developer Network: Article