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.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

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);
}

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.