color | CSS-Tricks - CSS-Tricks

The color property in CSS sets the color of text and text decorations.

p {
  color: blue;
}

Values

The color property can accept any CSS color value.

Named colors: for example, “aqua”.
Hex colors: for example, #00FFFF or #0FF.
RGB and RGBa colors: for example, rgb(0, 255, 255) and rgba(0, 255, 255, .5).
HSL and HSLa colors: for example, hsl(180, 100%, 50%) and hsla(180, 100%, 50%, .5).

Named Colors

p {
  color: aqua;
}

Named colors are also known as keyword colors, X11 colors, or SVG colors. All named colors are opaque by default except transparent, which is fully transparent or “clear”. See our Named Colors and Hex Equivalents snippet for a list of the named colors.

Hex Colors

Hex colors, or hexidecimal colors, are specified with alphanumeric values. The first pair of characters represents the red value, the second pair represents the green value, and the third pair represents the blue value, all in a range from 00 to FF.

p {
  color: #00FFFF;
}

If the pairs of red, blue, and green values are all doubles, you can abbreviate the hex value to 3-character shorthand — for example, #00FFFF can be abbreviated to #0FF.

.full-hex {
  color: #00FFFF; /* aqua */
}
.abbreviated-hex {
  color: #0FF; /* also aqua */
}

RGB and RGBa Colors

RGB colors are specified with a comma-separated list of three numeric values (ranging from 0 to 255) or percentage values (ranging from 0% to 100%). The first value represents the red value, the second represents the green value, and the third represents the blue value. RGB colors are opaque by default.

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

RGBa adds a fourth value for the alpha channel, which sets the opacity of the color. The alpha value is a number within a range from 0.0 (fully transparent) to 1 (fully opaque).

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

HSL and HSLa Colors

HSL colors are specified with a comma-separated list of three values: the degree of Hue (a number ranging from 0 to 360), a Saturation percentage (ranging from 0% to 100%), and a Lightness percentage (ranging from 0% to 100%). HSL colors are opaque by default.

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

HSLa adds a fourth value for the alpha channel to control the color’s opacity. The alpha value is a number within a range from 0.0 (fully transparent) to 1 (fully opaque).

p {
  color: hsla(180, 100%, 50%, .5);
}

Demo

See the Pen color values by CSS-Tricks (@css-tricks) on CodePen.

Usage Notes

The color property cascades. If you set it on the body, all descendant elements will inherit that color, unless they have their own color set in the user agent stylesheet.

Borders inherit color unless a color value is specified in the border declaration.

The color property applies to text-decoration lines. In browsers that support the text-decoration-color property, you can specify different colors for text and its decoration lines.

color also applies to list item markers (like bullet points and numbers). You can’t set a separate color for a list item marker, but you can replace it with an image with the list-style property.

Though named colors and hex colors don’t have alpha channels, you can set their opacity with the opacity property in all current browsers and IE9+.

More Information

Browser Support

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Any	Any	Any	Any	Any *	Any	Any

HSL, HSLa, and RGBa are supported in IE9+.