CSS Color Tutorial

, , …,
Buy Xah JavaScript Tutorial.

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 3 defined more color names, supported by all browsers. See: CSS Color Names.

RGB Color Syntax

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

The values can be specified in 3 ways:

Example:

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 Color Syntax

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

Opacity

See: CSS Color Transparency/Opacity.

CSS2's System Colors

See: CSS2 Named System Colors. (deprecated in CSS3)

Reference

blog comments powered by Disqus