Color formats

Learn hex, rgb, hsl and color names.

What are color formats?

In CSS you can write a color in four common formats: a name (red), hex (#e63946), rgb() and hsl(). All of them can render the same color in the browser.

Names like red are memorable, but they cover only a few dozen colors. A six-digit hex like #e63946 gives a precise tone. rgb(230, 57, 70) shows three light channels as numbers from 0 to 255. hsl(355, 78%, 56%) breaks a color into hue, saturation and lightness.

Hex colors

A hex color starts with a hash and runs six digits: #rrggbb. Each pair gives the strength of the red, green and blue channels; 00 is off, ff is full on.

For example #000000 is black, #ffffff is white, #ff5733 is a vivid orange. CSS also supports a three-digit shorthand: #f53 is the same color as #ff5533.

rgb() and hsl()

rgb() writes a color with three light channels: rgb(230, 57, 70). The numbers are 0–255 for red, green and blue in order. Higher values are brighter, lower values darker.

hsl() splits color the way the eye thinks about it: hue 0–360 around a color wheel, saturation in percent, lightness in percent. hsl(355, 78%, 56%) is a dark red; drop lightness to 20% and it becomes nearly black.

Exercise Write a hex color for h1 and an hsl color for h2

Add an h1 type selector and set its color property to the hex value #1a1a2e. Then add an h2 type selector and set its color property to the hsl value hsl(355, 78%, 30%).

Show example solution

/* add colors for h1 and h2 */
h1 {
  color: #1a1a2e;
}
h2 {
  color: hsl(355, 78%, 30%);
}

Test yourself

Which is a valid hex color value?
```
color: /* ? */;
```
- ff5733
- #ff5733
- rgb(255, 87, 51)
- 0xff5733
Show answer

#ff5733 — Correct. #ff5733 is a six-digit hex value; it starts with a hash.

Complete the rgb() value for pure red

a {
  color: rgb(____, 0, 0);
}

Show answer

a {
  color: rgb(255, 0, 0);
}

Match each color format to its description

#ff5733

Six-digit hex value
rgb(0, 0, 0)

Three numeric channels
hsl(120, 100%, 50%)

Hue, saturation, lightness
red

English color name

Next lesson: Opacity and alpha

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies