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