CSS Color Basics

Xah Lee, 2005-11-30, …, 2013-03-06

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