Цвета HSL

По числам RGB и hex трудно угадать, какой получится цвет, и непонятно, как их изменить, чтобы получить более светлый или более тёмный вариант. Цвета HSL описывают цвет так, как о нём думают люди. HSL — это первые буквы английских слов hue (оттенок), saturation (насыщенность) и lightness (светлота):

• Оттенок — это положение на цветовом круге в градусах от 0 до 360: 0 — красный, 120 — зелёный, 240 — синий, а 360 — снова красный.
• Насыщенность говорит о том, насколько цвет яркий: 0% — серый, 100% — самый яркий вариант этого оттенка.
• Светлота говорит о том, насколько цвет светлый: 0% — всегда чёрный, 100% — всегда белый, а 50% — сам цвет, ни осветлённый, ни затемнённый.

h1 {
	color: hsl(180, 100%, 50%);
}

Этот заголовок был бы голубым — ярким зеленовато-синим: оттенок 180° (внизу круга), полная насыщенность и светлота 50%.

Главное преимущество HSL: чтобы получить более светлый или более тёмный вариант цвета, достаточно изменить только светлоту. Наши зелёные заголовки, rgb(71, 105, 88), в HSL — это примерно hsl(150, 19%, 35%). С тем же оттенком и той же насыщенностью и светлотой 20% получится более тёмный вариант того же зелёного, а с 60% — более светлый:

hsl(150, 19%, 20%) hsl(150, 19%, 35%) hsl(150, 19%, 60%)