CSS Introduction | Basic CSS Properties | CSS Color

There are three main ways to express colors in CSS.

1. Color names
2. RGB color values
3. Hexadecimal color values

Expressing Colors with Color Names

Colors can be expressed by color name. The 16 HTML4 standard color names defined by the W3C are as follows.

Color names in HTML are not case-sensitive.

<style>
    .blue { color: blue; }
    .green { color: green; }
    .silver { color: silver; }
</style>

Expressing Colors with RGB Values

Monitors and screens express colors by mixing red, green, and blue. Therefore, HTML also uses RGB colors, which represent colors with these three basic colors.

The basic RGB colors, Red, Green, and Blue, each have a range from 0 to 255.

<style>
    .blue { color: rgb(0,0,255); }
    .green { color: rgb(0,128,0); }
    .silver { color: rgb(192,192,192); }
</style>

Expressing Colors with Hexadecimal Values

A hexadecimal color value is an RGB color value converted to hexadecimal. Therefore, the basic RGB colors, Red, Green, and Blue, each have a range from 00 to FF.

For example, the RGB value rgb(0,255,0) for green becomes the hexadecimal color value #00FF00.

<style>
    .blue { color: #0000FF; }
    .green { color: #008000; }
    .silver { color: #C0C0C0; }
</style>

CSS3 Colors

CSS3 adds the following ways to express colors.

1. RGBA color values
2. HSL color values
3. HSLA color values
4. The opacity property

Browser Support for CSS3 Color Values and opacity

Major browser versions that support the CSS3 color values and the opacity property are as follows.

Expressing Colors with RGBA Values

An RGBA color value is an RGB color value with an added alpha channel value.

The alpha channel represents the transparency of a color. The alpha channel value ranges from 0.0, which is fully transparent, to 1.0, which has no transparency.

<style>
    #header_01 {background-color: rgba(0,255,0,0);}
    #header_02 {background-color: rgba(0,255,0,0.2);}
    #header_03 {background-color: rgba(0,255,0,0.4);}
    #header_04 {background-color: rgba(0,255,0,0.6);}
    #header_05 {background-color: rgba(0,255,0,0.8);}
    #header_06 {background-color: rgba(0,255,0,1);}
</style>

Expressing Colors with HSL Values

Unlike RGB color values, which use the three primary colors of light, HSL color values express color with hue, saturation, and lightness. In HSL, H means Hue, S means Saturation, and L means Lightness.

Hue has a value from 0 to 360 and represents an angle on the color wheel. A hue value of 0 or 360 is red, 120 is green, and 240 is blue.

<style>
    #header_01 {background-color: hsl(0, 100%, 50%);}
    #header_02 {background-color: hsl(90, 100%, 50%);}
    #header_03 {background-color: hsl(180, 100%, 50%);}
    #header_04 {background-color: hsl(270, 100%, 50%);}
    #header_05 {background-color: hsl(360, 100%, 50%);}
</style>

Saturation has a value from 0% to 100% and represents how pale or vivid a color is. When saturation is 0%, the color becomes gray, and when it is 100%, it becomes the original color.

<style>
    #header_01 {background-color: hsl(0, 0%, 50%);}
    #header_02 {background-color: hsl(0, 20%, 50%);}
    #header_03 {background-color: hsl(0, 40%, 50%);}
    #header_04 {background-color: hsl(0, 60%, 50%);}
    #header_05 {background-color: hsl(0, 80%, 50%);}
    #header_06 {background-color: hsl(0, 100%, 50%);}
</style>

Lightness has a value from 0% to 100% and represents how bright or dark a color is. When lightness is 0%, the color is black; when it is 50%, it is the original color; and when it is 100%, it is white.

<style>
    #header_01 {background-color: hsl(0, 100%, 0%);}
    #header_02 {background-color: hsl(0, 100%, 20%);}
    #header_03 {background-color: hsl(0, 100%, 40%);}
    #header_04 {background-color: hsl(0, 100%, 50%);}
    #header_05 {background-color: hsl(0, 100%, 60%);}
    #header_06 {background-color: hsl(0, 100%, 80%);}
    #header_07 {background-color: hsl(0, 100%, 100%);}
</style>

Expressing Colors with HSLA Values

An HSLA color value is an HSL color value with an added alpha channel value.

<style>
    #header_01 {background-color: hsla(0, 100%, 50%, 0);}
    #header_02 {background-color: hsla(0, 100%, 50%, 0.2);}
    #header_03 {background-color: hsla(0, 100%, 50%, 0.4);}
    #header_04 {background-color: hsla(0, 100%, 50%, 0.6);}
    #header_05 {background-color: hsla(0, 100%, 50%, 0.8);}
    #header_06 {background-color: hsla(0, 100%, 50%, 1);}
</style>

opacity Property

The opacity property sets the transparency of a color. Its value ranges from 0.0, which is fully transparent, to 1.0, which has no transparency.

<style>
    #header_01 {background-color: rgb(0,255,0); opacity:0}
    #header_02 {background-color: rgb(0,255,0); opacity:0.2}
    #header_03 {background-color: rgb(0,255,0); opacity:0.4}
    #header_04 {background-color: rgb(0,255,0); opacity:0.6}
    #header_05 {background-color: rgb(0,255,0); opacity:0.8}
    #header_06 {background-color: rgb(0,255,0); opacity:1}
</style>

Difference Between opacity and the Alpha Channel

The opacity property and the alpha channel both adjust transparency.

When opacity is set on an element, all child elements of that element use the same transparency. The alpha channel, however, applies transparency only to the element whose color is set.

The following example shows the difference between the opacity property and the alpha channel.

<style>
    #para_01 {background-color: rgb(255,0,0); opacity:0}
    #para_06 {background-color: rgb(255,0,0); opacity:1}
    #para_07 {background-color: rgba(255,0,0,0);}
    #para_12 {background-color: rgba(255,0,0,1);}
</style>