CSS Color

The color property allows webmasters to define the color of an element in a CSS stylesheet.

This property takes values in the following forms:

• Hexadecimal code
• Color name
• RGB
• RGBa
• HSL
• HSLa

Both RGB and HSL use three numbers to determine the color. RGBa and HSLa add a fourth number to indicate the level of transparency, with 0 being fully transparent, and 1 being fully opaque.

The general syntax for the color property is as follows:

Hexadecimal code:

{color: #XXXXXX;} where XXXXXX is a hexadecimal code.

Color name:

{color: [color_name];} where color_name denotes the name of the color in plain English.

RGB:

{color: rgb (X, Y, Z); }   where X, Y, and Z are numbers between 0 and 255.
    OR
{color: rgb (X%, Y%, Z%); }   where X, Y, and Z are numbers between 0 and 100.

RGBa:

{color: rgba (X, Y, Z, A); }   where X, Y, and Z are numbers between 0 and 255, and A is a number between 0 and 1.
    OR
{color: rgba (X%, Y%, Z%, A); }   where X, Y, and Z are numbers between 0 and 100, and A is a number between 0 and 1.

HSL:

{color: hsl (X, Y%, Z%); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100.

HSLa:

{color: hsla (X, Y%, Z%, A); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100, and A is a number between 0 and 1.

Hexadecimal code is a 6-character (or 3-character when the first two, the middle two, and the last two codes of the 6-character presentation are all the same. For example, #FFF and #FFFFFF both mean white) code specifying the color. This hexadecimal color chart shows how hexadecimal codes correspond to the colors they render.

Below are examples showing different ways to specify a color.

CSS Declaration	Output
p { color:#FF0000; }	FF0000 is red.
p { color:rgb(255,0,255); }	rgb(255,0,255) is pink.
p { color:green; }	This is green.