CSS Colors

Introduction

In CSS colors can be specified by using one of the following:

  1. Color Names
  2. RGB Values
  3. RGBA Values
  4. HSL Values
  5. HSLA Values
  6. Hexadecimal Values

Color Names

A color can be specified by using a predefined color name. Such as:

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

All modern browsers support up to 140 color names. Click here to see all the color names.

RGB Values

RGB color values are supported in all major browsers, and it is specified with:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255. For example, rgb(255, 0, 0) is rendered as red, because the red parameter is set to its highest value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0). To display white, set all color parameters to 255, like this: rgb(255, 255, 255). Shades of gray are often defined using equal values for all the 3 light sources, for example:

rgb(60, 60, 60), rgb(120, 120, 120), rgb(180, 180, 180), rgb(240, 240, 240)

RGBA Values

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

HSL Values

HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for Hue, Saturation, and Lightness. HSL color values are specified with:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. With 0 is red, 120 is green, and 240 is blue.

Saturation can be described as the intensity of a color in a percentage value, with 0% is completely gray, you can no longer see the color. A saturation value of 50% is gray, but you can still see the hue color, and a value 100% is pure color, no shades of gray.

Lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades.

HSLA Values

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

Hexadecimal

Hexadecimal color values are supported in all browsers. A hexadecimal color is specified with:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255) specifying the intensity of the color. For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

Shades of gray are often defined using equal values for all the 3 light sources:

#3c3c3c, #787878, #b4b4b4, #f0f0f0

Reference

All the documentation in this page is taken from w3schools