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 relative color syntax. 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

Subscribe to Premium to read the rest.