CSS Reference Guide: color

The CSS color property sets the foreground color of a text element or text decorations.

Jump ahead:

• Demo
• Syntax
• Values
  • Keywords
  • Named values
  • Hex values
  • RGB and RGBA values
  • HSL and HSLA values

---

Demo

See the Pen
CSS Color Example by Solomon Eseme (@kaperskyguru)
on CodePen.

---

Syntax

p.text {
  color: <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor
}

---

Values

The value of the CSS color property can be specified in many different ways. We review them in detail below.

Keywords

The CSS color property can take a keyword as its value. Its default value is the keyword currentcolor, which takes its value from the inherited value of the color property.

p.text {
  color: currentcolor;
}

We also have transparent, which is a color value that is not opaque but fully transparent and clear.

p.text {
  color: currentcolor | transparent
}

---

Named values

Named values are sometimes referred to as named colors. These are simply known named colors like red, green, etc. that have their hex values attached to them.

p.text {
  color: red | green | aqua | tan | rebeccapurple | etc
}

---

Hex values

A color’s hex value is represented as an alphanumeric string of six characters, preceded by the # character.

The first alphanumeric pair of the hex value represents the red value, the second pair of the value represents the green value, and the third pair represents the blue value in the RGB spectrum.

CSS also allows the use of three-character abbreviations to specify hex values. These values must always range from 00 to FF (for strings of six characters) or 0 to F (for strings of three characters).

p.text {
  color: #00FFFF // 00 => RED, FF => GREEN and FF => BLUE
}

div.text {
  color #eee // hex value can also be 3 values only. E => RED, E => GREEN and E => BLUE
}

---

RGB and RGBA values

RGB colors are represented by a comma-separated list of three values that denote the red, green, and blue values of the color, in that order. These three values can range from 0 to 2``5``5, or from 0% to 100%. By default, all RGB colors are opaque.

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

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

The RGBA color value allows you to specify the opacity (or alpha) value of the color, where 0.0 represents fully transparent and 1 represents fully opaque. In this way, you can adjust the opacity of RGB colors.

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

p.text {
  color : rgba(0%, 100%, 100%, 0.8);
}

---

HSL and HSLA values

HSL colors are represented by three values that the denote the hue (ranging from 0 to 360), saturation (ranging from 0% to 100% ), and lightness ( ranging from 0% to 100% ) of a color. By default, all HSL colors are opaque.

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

The HSLA value allows you to specify the opacity (or alpha) value of the color, where 0.0 represents fully transparent and 1 represent fully opaque. In this way, you can adjust the opacity of HSL colors.

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