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:

p {color:red}

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, in 2 hexadecimal digits.

/* rgb color by hexadecimal */
p { color: #ffc0cb }

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

p { color: #0f7; }
/* same as above */
p { color: #00ff77; }

RGB Color by Integer

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

RGB Color by Percent

/* rgb color by percentage */
p { 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

Syntax and basic data types#color-units

CSS Color Module Level 3

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.