CSS Colors

March 09, 2008

Color values

CSS lets you specify 24-bit colors (that's 16,777,216 colors!) for properties such as text color, background color and border color to spice up your designs. You can either use color names, hexadecimal notation or RGB (red, green, blue) notation.

CSS color names

To make things easier, CSS includes 16 standard color names in plain English as well as over 100 extended color names. Here's a list of the standard ones:

Color nameDisplay

aqua

black

blue

fuchsia

gray

green

lime

maroon

navy

olive

purple

red

silver

teal

white

yellow

Additionally you can set a color value to either none or transparent to prevent the element from drawing any color (other elements behind it will show through).

Hexadecimal colors

Although color names come in quite handy sometimes, they're far too few to suit every design. To tap into the full range of 24-bit colors you can use hexadecimal values.

Hexadecimal colors are made up of a # pound sign followed by a 6-digit hexadecimal number like #ff065ca. The first 2 digits represent the red color component, the second pair is the green and the third is the blue component. Their value can range from 00 to ff, #000000 being black and #ffffff being white.

Hex colorDisplay

#000

#3b948d

#aed527

#ff7612

#fff

Maybe you've noticed that I wrote #000 instead of #000000 for displaying black color. This is a shorthand notation that states the digit of each pair only once if each pair consists of the same digits. For example #eeeeee can be written as #eee, #3399cc as #39c and so on. Use this whenever possible to reduce the size of your CSS code.

RGB colors

Last but not least you can also specify color values using the RGB model (red, green, blue). It's basically like hexadecimal colors but instead of hex pairs you're using decimal values from 0 to 255 for each color component like rgb(red,green,blue).

RGB colorDisplay

rgb(0,0,0)

rgb(59,148,141)

rgb(174,213,39)

rgb(255,118,18)

rgb(255,255,255)

You can already see that the RGB notation produces longer code than the hexadecimal notation while doing exactly the same thing. For this reason RGB is rarely used over hex. Most graphics software display colors in both RGB and hex format anyway.

Text color

The color property can be used to change the text color. It can be applied to any HTML element which contains text.

CSS color:

  • p {color:green}

Display:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed risus sapien, commodo ut, imperdiet sit amet, tempus non, neque. Suspendisse porttitor lobortis felis. Maecenas est.

Background color

The background-color property can be used to change the background color of almost any HTML element.

CSS background-color:

  • p {background-color:yellow}

Display:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed risus sapien, commodo ut, imperdiet sit amet, tempus non, neque. Suspendisse porttitor lobortis felis. Maecenas est.