CSS Colors (RGB)

Colors in CSS are displayed using a predefined color name or a combination of red, green, and blue color values. The RGB color values can be specified in decimal, hexadecimal, or as percentages. Using this method, over 16 million different colors can be obtained.

Example

<div style="background-color: rgb(255,0,0);">
</div>

The following table lists some of the more common color names and their hexadecimal equivalents. These color names are recognized by the W3C as "web standard".

CSS Colors (RGBA)

The CSS3 specification adds the ability to specify the "alpha", or opacity, of a color. The alpha is specifed as a decimal number between 0.0 (transparent) and 1.0 (opaque).

Example

<div style="background-color: rgba(255,0,0,0.2);">
</div>

The following boxes show the color "red" at different alpha levels:

CSS Colors (HSL)

The CSS3 specification adds the ability to specify colors using HSL (Hue, Saturation, Lightness). HSL takes three values:
- Hue is the degree on the color wheel: 0 = red, 120 = green, 240 is blue
- Saturation is a percentage, where 100% is the full color
- Lightness is a percentage, where 0% is dark (black) and 100% is light (white)

Example

<div style="background-color: hsl(0,100%,50%);">
</div>

The following boxes show the three basic colors for HSL:

CSS Colors (HSLA)

The CSS3 specification adds the ability to specify colors using HSLA (Hue, Saturation, Lightness, Alpha). HSLA takes four values:
- Hue is the degree on the color wheel: 0 = red, 120 = green, 240 is blue
- Saturation is a percentage, where 100% is the full color
- Lightness is a percentage, where 0% is dark (black) and 100% is light (white)
- Alpha is a decimal number between 0.0 (transparent) and 1.0 (opaque)

Example

<div style="background-color: hsla(0,100%,50%,0.2);">
</div>

The following boxes show the color "red", hsl(0,100%,50%), at different alpha levels:

CSS Color Names

The following table lists the color names supported by most browsers and their hexadecimal equivalents. Except for those also listed in the table above, these color names are not recognized by the W3C as "web standard".

Description

Specifies the color using a color name.

There are 16 valid predefined color names as recognized by the World Wide Web Consortium (W3C). They are:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

There are over 140 additional color names supported by most browsers. They are listed in the color chart under CSS Basics->CSS Colors.

Examples

This example sets the paragraph text color to red.

p {
  color:red;
}

Browser Support

Miscellaneous Information

Description

Specifies the color with a hex code, e.g. #ff0000

The first two characters are the red saturation. Range is 00-ff.

The second two characters are the red saturation. Range is 00-ff.

The third two characters are the red saturation. Range is 00-ff.

Note: A 3 digit shorthand notation can be used for some hex values, e.g. #a9c is equivalent to #aa99cc.

Examples

This example sets the paragraph text color to red and h1 headings to green.

p {
  color:#ff0000;
}

h1 {
  color:#0f0;
}

Browser Support

Miscellaneous Information

Description

Specifies a color with an HSL code, e.g. hsl(170,50%,45%,0.75)

The first number is the hue (range is 0 - 360).

The second number is the saturation (range is 0% - 100%). 0% is completely denatured (grayscale whereas 100% is fully saturated (full color).

The third number is the lightness (range is 0-255). 0% is completely dark (black) whereas 100% is completely light (white).

Examples

This example sets the paragraph text color to red:

p {
  color:hsl(0,50%,50%);
}

This produces the following result:

Browser Support

Miscellaneous Information

Description

Specifies a color with an HSL code along with the transparency, or alpha, e.g. hsla(170,50%,45%,0.75)

The first number is the hue (range is 0 - 360).

The second number is the saturation (range is 0% - 100%). 0% is completely denatured (grayscale whereas 100% is fully saturated (full color).

The third number is the lightness (range is 0-255). 0% is completely dark (black) whereas 100% is completely light (white).

The fourth number is the alpha (range is 0.0 - 1.0). 0 is fully transparent whereas 1 is fully opaque.

Examples

This example sets the paragraph text color to transparent red.

p {
  color:hsla(0,50%,50%,0.5);
}

This produces the following result:

Browser Support

Miscellaneous Information

Description

Specifies the color with an RGB code, e.g. rgb(255,0,0)

The first number is the red saturation. Range is 0-255.

The second number is the green saturation. Range is 0-255.

The third number is the blue saturation. Range is 0-255.

Examples

This example sets the paragraph text color to red.

p {
  color:rgb(255,0,0);
}

This produces the following result:

Browser Support

Miscellaneous Information

Description

Specifies the color with an RGB code using percentages, e.g. rgb(100%,0,0)

The first percentage is the red saturation. Range is 0-100.

The second percentage is the green saturation. Range is 0-100.

The third percentage is the blue saturation. Range is 0-100.

Examples

This example sets the paragraph text color to red.

p {
  color:rgb(100%,0,0);
}

Browser Support

Miscellaneous Information

Description

Specifies a color with an RGB code along with the transparency, or alpha, e.g. rgba(255,0,0,0.5)

The first number is the red saturation (range is 0-255).

The second number is the green saturation (range is 0-255).

The third number is the blue saturation (range is 0-255).

The fourth number is the alpha (range is 0.0 - 1.0).

Examples

This example sets the paragraph text color to transparent red.

p {
  color:rgba(255,0,0,0.5);
}

This produces the following result:

Browser Support

Miscellaneous Information