CSS Color 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:

/* rgb color by hexadecimal */
span.xyz { color: #ffc0cb }
/* rgb color by decimal. 0 to 255 */
span.xyz { color: rgb(255, 192, 203) }
/* rgb color by percentage */
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: CSS HSL Color Samples.


See: CSS Color Transparency/Opacity.

CSS2's System Colors

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


Like what you read? Please tell friends, share link, or Buy JavaScript in Depth. Thanks.
blog comments powered by Disqus