Use CSS Color Like a Pro: RGB, HSL, HWB, LAB, LCH Explained

Everything you need to know about CSS color models

6 min readApr 15, 2023

When working with Cascading Style Sheets (CSS), colors are an essential aspect of web design. In this article, we will discuss various color models, including RGB, HSL, HWB, LAB, LCH, currentColor, and others. We will explore their advantages and disadvantages, as well as their practical applications in CSS.

Common color values

Let’s start with the common color values. The easiest one is to use CSS named colors:

div {
  background-color: blue;
}

But that’s pretty restrictive, so we’d probably use hexadecimal values more often:

div {
  background-color: #0000ff; /* Blue */
}

In some cases, you can use a shorthand three-digit hexadecimal notation. Each digit represents the red, green, and blue components, respectively. The browser will expand each digit to two identical digits. For example:

div {
  background-color: #F00; /* Red, equivalent to #FF0000 */
}

But it’s hard to understand, and you’re unlikely to know its color directly. And it’s not easy to extend, for example, we need to adjust its transparency, then you need to create a new hex value.

RGB color model

The RGB color model is perhaps the most widely used model in CSS. It is based on the additive color model, where red, green, and blue light are combined to create a broad spectrum of colors. In CSS, the RGB model can be expressed as: rgb(red, green, blue)

The values for red, green, and blue can range from 0 to 255. For example, the following CSS code sets the background color of a div element to red:

div {
  background-color: rgb(255, 0, 0);
}

Another way to express the RGB values is by using the percentage notation. Instead of using integers from 0 to 255, percentages are used, ranging from 0% to 100%. For example:

div {
  background-color: rgb(100%, 0%, 0%);
}

You can also add an alpha channel (for transparency):

div {
  background-color: rgba(100%, 0%, 0%, 0.4); /* transparency of 40% */
}

HSL color model

The HSL color model stands for Hue, Saturation, and Lightness. It is a more intuitive way to work with colors compared to the RGB model. HSL can be expressed in CSS as: hsl(hue, saturation, lightness)

A more detailed explanation:

Hue is an angle on the color wheel, ranging from 0 to 360 degrees. 0 (or 360) is red, 120 is green, and 240 is blue.
Saturation is a percentage, where 0% is grayscale, and 100% is full color.
Lightness is also a percentage, with 0% being black, 50% being the base color, and 100% being white.

Here’s an example of setting the background color of a div element to red using the HSL notation:

div {
  background-color: hsl(0deg, 100%, 50%);
}

Likewise, it also has an alpha channel:

div {
  background-color: hsla(0deg, 100%, 50%, 0.4); /* transparency of 40% */
}

HWB color model

The HWB color model stands for Hue, Whiteness, and Blackness. It is designed to be more intuitive than RGB and HSL for certain tasks, such as creating monochrome color palettes. In CSS, the HWB model can be expressed as:

hwb(hue, whiteness, blackness)

Hue is the same as in the HSL model, with an angle on the color wheel from 0 to 360 degrees.
Whiteness and Blackness are percentages, ranging from 0% to 100%.

For example, to set the background color of a div element to red using the HWB notation:

div {
  background-color: hwb(0deg, 0%, 0%);
}

LAB color model

The LAB color model is based on the CIE Lab* color space, which is designed to approximate human vision. It consists of three components: L* for lightness and a* and b* for the color dimensions. LAB can be useful in color manipulation and transformation tasks. In CSS, the LAB model can be expressed as:

lab(lightness a* b*)

Lightness is a percentage, where 0% represents black and 100% represents white.
a* and b* are color dimensions, ranging from -128 to 127.

For example, to set the background color of a div element to red using the LAB notation:

div {
  background-color: lab(53.24% 80.11 67.22);
}

LCH color model

The LCH color model stands for Lightness, Chroma, and Hue. It is based on the CIE Lab* color space and is designed to be more perceptually uniform than other color models. In CSS, the LCH model can be expressed as:

lch(lightness chroma hue)

Lightness is a percentage, with 0% being black and 100% being white.
Chroma is a positive number, representing the colorfulness of the color.
Hue is an angle on the color wheel, ranging from 0 to 360 degrees.

Here’s an example of setting the background color of a div element to red using the LCH notation:

div {
  background-color: lch(53.24% 104.55 40deg);
}

Advanced

CSS Color Module Level 4 provides a more convenient syntax for our color functions, and most browsers support it. So almost all the color functions described above can no longer be separated by commas, and the optional alpha parameter can be represented by forward slashes:

div {
  /* without commas */
  background-color: hsl(0deg 100% 50%);

  /* optional transparency of 40% */
  background-color: hsl(0deg 100% 50% / 40%);
  background-color: hwb(0deg 0% 0% / 40%);
  background-color: lab(53.24% 80.11 67.22 / 40%);
  background-color: lch(53.24% 104.55 40deg / 40%);
}

In some cases, you may want to use the same color for multiple attributes of an element (such as text color and border color), you can choose to use the currentColor keyword:

div {
  color: red;
  border: 2px solid currentColor;
}

The currentColor keyword in CSS represents the current value of the ‘color’ property for the element it is applied to. So In this example, the text color and the border color of the div element will both be red.

Color manipulation techniques

When working with colors in CSS, you may need to adjust or modify colors for various reasons, such as creating color schemes or applying different shades of a base color. Some common color manipulation techniques include:

Using CSS variables: By defining custom properties (CSS variables), you can store a color value and reuse it throughout your stylesheet. This makes it easier to maintain and update your colors:

:root {
  --main-color: #FF0000; /* Red */
}

div {
  background-color: var(--main-color);
}

Since CSS custom properties allow us to use partial property values, you can use some math to quickly create different tints:

:root {
  --primary-color: hsl(220, 60%, 70%);
  --secondary-color: hsl(var(--primary-color, hue), calc(var(--primary-color, lightness) + 20%), calc(var(--primary-color, saturation) - 10%));
}

In the above code, we have a main color, then we can use calc to increase or decrease its brightness value and saturation to get a lighter, slightly different color. Here I've used HSL, which is great for custom property calculations due to its intuitiveness.

Using CSS preprocessors: Preprocessors like Sass and Less provide additional color manipulation functions, making it easier to create and manage complex color schemes. For example, in Sass, you can use the lighten() and darken() functions to create different shades of a base color:

$base-color: #FF0000; /* Red */

div {
  background-color: lighten($base-color, 20%);
}

Conclusion

Understanding these color models and notations will enable you to work with colors more effectively in your web projects, ensuring that your designs are both visually appealing and easy to maintain. Additionally, leveraging color manipulation techniques, such as using CSS variables, color functions, and preprocessors, will help you create and manage complex color schemes with ease.

Thanks for reading. If you like such stories and want to support me, please consider becoming a Medium member. It costs $5 per month and gives unlimited access to Medium content. I’ll get a little commission if you sign up via my link.