Background

CSS colors may also be represented as a hex triplet, where the members represent the red, green and blue components of a color. Each of these values represents a number in the range of 00 to FF, or 0 to 255 in decimal notation. Uppercase and/or lowercase Hexidecimal values may be used (i.e. #3fc = #3FC = #33ffCC). The browser interprets #369 as #336699. If that is not what you intended but rather wanted #306090, you need to specify that explicitly.

The total number of colors that can be represented with hex notation is 256 ^ 3 or 16,777,216.

Syntax

color: #rrggbb;
color: #rgb;

Value	Description
rr	00 - FF for the amount of red
gg	00 - FF for the amount of green
bb	00 - FF for the amount of blue

.some-class {
  /* This is equivalent to using the color keyword 'blue' */
  color: #0000ff;
}

.also-blue {
  /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
  color: #00f;
}

Hexadecimal notation (opens new window) is used to specify color values in the RGB color format, per the W3C's 'Numerical color values' (opens new window).

There are a lot of tools available on the Internet for looking up hexadecimal (or simply hex) color values.

Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options!

Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive: that is, they don't care about capitalization. #FFC125 and #ffc125 are the same color.

RGB is an additive color model which represents colors as mixtures of red, green, and blue light. In essence, the RGB representation is the decimal equivalent of the Hexadecimal Notation. In Hexadecimal each number ranges from 00-FF which is equivalent to 0-255 in decimal and 0%-100% in percentages.

.some-class {
  /* Scalar RGB, equivalent to 'blue'*/
  color: rgb(0, 0, 255);
}

.also-blue {
  /* Percentile RGB values*/
  color: rgb(0%, 0%, 100%);
}

Syntax

rgb(<red>, <green>, <blue>)

Similar to rgb() notation (opens new window), but with an additional alpha (opacity) value.

.red {
  /* Opaque red */
  color: rgba(255, 0, 0, 1);
}

.red-50p {
  /* Half-translucent red. */
  color: rgba(255, 0, 0, 0.5);
}

Syntax

rgba(<red>, <green>, <blue>, <alpha>);

HSL stands for hue ("which color"), saturation ("how much color") and lightness ("how much white").

Hue is represented as an angle from 0° to 360° (without units), while saturation and lightness are represented as percentages.

p {
  color: hsl(240, 100%, 50%); /* Blue */
}

(opens new window)

Syntax

color: hsl(<hue>, <saturation>%, <lightness>%);

Notes

Similar to hsl() notation (opens new window), but with an added alpha (opacity) value.

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Syntax

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);

Syntax

• color: #rgb
• color: #rrggbb
• color: rgb[a](, , [, ])
• color: hsl[a](, <saturation%>, <lightness%>[, ])
• color: colorkeyword (opens new window) /_ green, blue, yellow, orange, red, ..etc _/