CSS Color Basics

Xah Lee, 2005-11-30, 2012-04-20

CSS2 Named Colors

◼ white #ffffff
◼ silver #c0c0c0
◼ gray #808080
◼ black #000000
◼ 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}

CSS3 Named Colors

See: Complete List of CSS Color Names.

RGB and HSL Color Syntax

RGB Model

span.xyz { color: #ffc0cb }
span.xyz { color: rgb(255, 192, 203) }
span.xyz { color: rgb(100%, 75%, 79%) }

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

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

HSL Model

See: CSS3 HSL (Hue, Saturation, Lightness) Color Samples.

Opacity

See: CSS Color Transparency/Opacity.

CSS2's System Colors

See: CSS2 Named System Colors.

Reference

http://www.w3.org/TR/css3-color/#svg-color