Color functions

Learn rgb(), hsl() and modern color functions.

The rgb() function

The rgb() function describes a color with red, green and blue channels. Each channel ranges from 0 to 255. rgb(255, 0, 0) is full red, rgb(0, 0, 0) is black.

A fourth value adds transparency: rgba(255, 0, 0, 0.5) is half-transparent red. Modern browsers also accept rgb(255 0 0 / 0.5).

The hsl() function

hsl() describes a color with hue, saturation and lightness. Hue is a degree from 0 to 360: 0 red, 120 green, 240 blue.

Saturation and lightness are written as percentages. hsl(0, 100%, 50%) is vivid red; changing lightness gives pastel or dark shades.

Transparency in color functions

Both rgb() and hsl() accept a fourth value for transparency. Older writing used rgba() and hsla() as separate functions, but modern CSS accepts rgb(20 20 20 / 0.8).

Transparency is a number between 0 (fully transparent) and 1 (fully opaque), or a percentage.

Exercise Color functions for a warning box

Write a .warning selector. Set its background color to hsl(45, 100%, 50%) and its text color to rgb(20, 20, 20).

Show example solution

/* add the warning section */
.warning {
  background-color: hsl(45, 100%, 50%);
  color: rgb(20, 20, 20);
}

Test yourself

What color is rgb(0, 128, 0)?
```
/* channels are red, green, blue in order */
```
- Blue
- Yellow
- Green
- Purple
Show answer

Green — Correct. The green channel is 128, red and blue are zero; the result is green.

Write the green hue

.member {
  background-color: hsl(____, 100%, 50%);
}

Show answer

.member {
  background-color: hsl(120, 100%, 50%);
}

Match each function to its parameters

rgb()

Red, green, blue
hsl()

Hue, saturation, lightness
rgba()

Color and transparency
#fff

Hex color

Next lesson: Summary - Responsive typography

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies