skip to contentstylized crane logoWhite Crane Education

Specifying Colors

CSS supports five different methods for specifying colors.

#RRGGBB This method defines a color with three two-digit hexadecimal numbers whose values range from 00 to FF. The first two digits set the red value, the second two set the green and the last two set the blue. So, for example, "pure blue" would be #0000FF.
#RGB This is a shorthand for the previous method where each of the R, G and B values are duplicated to get to the RRGGBB format. For example, #F6A would become #FF66AA. Continuing our previous example, pure blue would be #00F.
rgb(rrr.rr%, ggg.gg%, bbb.bb%) This method lets the designer specify the R, G and B values as percentages with two decimal point accuracy. So with this approach, "pure blue" would be rgb(0%,0%,100%).
rgb(rrr, ggg, bbb) This is similar to the previous method but it takes integer values rather than percentages. This is generally more intuitive than the first two methods because the values are regular decimal numbers, from 0 to 255, instead of hexadecimal numbers. "Pure blue" would be rgb(0,0,255).
keyword The standard requires that browsers accept seventeen standard keyword colors: aqua, black, blue, fuschia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal and white. Many browsers accept larger lists such as the X11 color keywords. For a list see the color list on White Crane Education's JavaScript reference.

Examples

The examples show how to create a variety of colors using all five of the various methods. Some options may not be possible using the #RGB and keyword methods.

CSS Sample Text
color: #FFFF00
color: #FF0
color: rgb(100%,100%,0%)
color: rgb(255,255,0)
color: yellow
Four score and seven years ago
color: #8B0000
color: rgb(54.51%,0%,0%)
color: rgb(139,0,0)
color: darkred
Four score and seven years ago
color: #6A5ACD
color: rgb(41.57%,35.29%,80.39%)
color: rgb(106,90,205)
color: slateblue
Four score and seven years ago
color: #5A2B12
color: rgb(35.29%,16.86%,7.06%)
color: rgb(90,43,18)
Four score and seven years ago