CSS Color Tutorial

By Xah Lee. Date: . Last updated: .

CSS 2 Named Colors

CSS 2 defines these color names:

black #000000 white #ffffff silver #c0c0c0 gray #808080 red #ff0000 maroon #800000 yellow #ffff00 olive #808000 lime #00ff00 green #008000 aqua #00ffff teal #008080 blue #0000ff navy #000080 fuchsia #ff00ff purple #800080 orange #ffa500

CSS code example:

span.xyz {color:red}

CSS 2 Color Spec Syntax and basic data types#color-units

CSS 3 Named Colors

CSS Color Names

RGB Color Hex Syntax

The RGB color model uses 3 values, for {Red, Green, Blue}, each with a value range from 0 to 255.

/* rgb color by hexadecimal */
span.xyz { color: #ffc0cb }

When using hexadecimal, if digit for each value are repeated, it can be abbreviated to just 3 hex digits. Like this:

span.xyz { color: #0f7; }        
/* same as above */
span.xyz { color: #00ff77; }

RGB Color by Integer

/* rgb color by integer, 0 to 255 */
span.xyz { color: rgb(255, 192, 203) }

RGB Color by Percent

/* rgb color by percentage */
span.xyz { color: rgb(100%, 75%, 79%) }

HSL Color Syntax

hsl(hue, saturation%, lightness%)

see CSS HSL Color Samples.

Opacity

CSS: Opacity.

CSS2's System Colors

CSS 2 Named System Colors. (deprecated in CSS3)

Reference

Like what you read? Buy JavaScript in Depth.