What are the different ways to represent colors in CSS?
Author: Deron Eriksson
Description: This tutorial describes the different ways to represent colors in CSS.
Tutorial created using: Windows XP


Page:    1 2 >

Colors can be represented in several ways is CSSW. To begin with, keyword color names can be used. For CSS2, there are 16 color keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. For CSS2.1, orange is added. The following table lists the color keywords, their 3-digit and 6-digit hexadecimal representations, RGB decimal notation, RGB percent notation, and an example of the color.

Keyword6-Digit Hex3-Digit HexRGB Notation (Decimal)RGB Notation (Percent)Color
aqua#00ffff#0ffrgb(0,255,255)rgb(0%,100%,100%) 
black#000000#000rgb(0,0,0)rgb(0%,0%,0%) 
blue#0000ff#00frgb(0,0,255)rgb(0%,0%,100%) 
fuchsia#ff00ff#fofrgb(255,0,255)rgb(100%,0%,100%) 
gray#808080-rgb(128,128,128)rgb(50%,50%,50%) 
green#008000-rgb(0,128,0)rgb(0%,50%,0%) 
lime#00ff00#0f0rgb(0,255,0)rgb(0%,100%,0%) 
maroon#800000-rgb(128,0,0)rgb(50%,0%,0%) 
navy#000080-rgb(0,0,128)rgb(0%,0%,50%) 
olive#808000-rgb(128,128,0)rgb(50%,50%,0%) 
orange#ffA500-rgb(255,165,0)rgb(100%,65%,0%) 
purple#800080-rgb(128,0,128)rgb(50%,0%,50%) 
red#ff0000#f00rgb(255,0,0)rgb(100%,0%,0%) 
silver#c0c0c0-rgb(192,192,192)rgb(75%,75%,75%) 
teal#008080-rgb(0,128,128)rgb(0%,50%,50%) 
white#ffffff#fffrgb(255,255,255)rgb(100%,100%,100%) 
yellow#ffff00#ff0rgb(255,255,0)rgb(100%,100%,0%) 

As you can tell from the table above, colors can also be represented using hexadecimal notation. Hexadecimal notation takes two forms: #rrggbb and #rgb. Both forms start with a # sign. Whereas the color keywords are limited to 17 colors, the hexadecimal representation and the other representations discussed allow for a much wider variety of colors.

(Continued on page 2)

Page:    1 2 >