RGB, HEX и HSL: в чём разница и когда что использовать

Сравниваем форматы цвета RGB, HEX и HSL: как устроены, чем отличаются, когда какой удобнее, как переводить один в другой. Таблица и примеры CSS.

Основы цвета · 26 октября 2026 г. · 2 мин чтения

RGB, HEX и HSL описывают один и тот же экранный цвет разными способами. RGB задаёт яркость красного, зелёного и синего каналов (0–255), HEX — те же три числа в шестнадцатеричной записи, а HSL — тон, насыщенность и светлоту, что удобнее для человека. Например, #DE7C56 = rgb(222, 124, 86) = hsl(17, 67%, 60%).

Сравнение в одной таблице

	RGB	HEX	HSL
Запись	`rgb(222, 124, 86)`	`#DE7C56`	`hsl(17, 67%, 60%)`
Что описывает	Смешение трёх световых каналов	То же, что RGB	Тон, насыщенность, светлота
Удобно читать человеку	Средне	Плохо	Хорошо
Удобно менять оттенок	Сложно	Сложно	Легко
Где чаще встречается	Код, видео, Photoshop	CSS, Figma, брендбуки	CSS-темы, дизайн-системы

RGB: как смешивается свет

Экран смешивает красный, зелёный и синий свет. Каждый канал — число от 0 до 255. Все нули дают чёрный, все 255 — белый. RGB точно соответствует тому, как цвет выводится на экран, но по числам трудно представить сам цвет.

HEX: компактный RGB

HEX — те же три числа, записанные двумя шестнадцатеричными цифрами каждое. Его любят за краткость: код легко скопировать и вставить. Подробно — в статье что такое HEX-код.

HSL: цвет «по-человечески»

H (hue) — тон, угол на цветовом круге от 0 до 360°: 0 — красный, 120 — зелёный, 240 — синий.
S (saturation) — насыщенность, 0% — серый, 100% — максимально чистый цвет.
L (lightness) — светлота, 0% — чёрный, 50% — «чистый» цвет, 100% — белый.

Главное преимущество HSL — оттенки одного цвета получаются изменением одного числа:

:root {
  --accent: hsl(17, 67%, 60%);
  --accent-light: hsl(17, 67%, 80%);
  --accent-dark: hsl(17, 67%, 35%);
}

Подробнее о цветовых переменных — в статье цвета в CSS: переменные и темы.

Что выбрать

Передать цвет коллеге или в брендбук — HEX.
Строить светлые и тёмные варианты, темы — HSL.
Работать с прозрачностью в коде — rgb(222 124 86 / 50%) или hsl(17 67% 60% / 50%).
Программно смешивать цвета — RGB.

Генератор палитры показывает все три формата для каждого цвета, так что переводить вручную не придётся.

Частые вопросы

Есть ли разница в качестве цвета между форматами?

Нет. Это разные записи одного и того же цвета в пространстве sRGB.

Что такое HSB/HSV и чем отличается от HSL?

HSB (HSV) используется в Photoshop и Figma. Тон тот же, но вместо светлоты — яркость: в HSB 100% яркости — это чистый цвет, а в HSL чистый цвет находится на 50% светлоты.

Как перевести HEX в HSL?

Проще всего — инструментом: генератор палитры показывает HSL рядом с HEX. Вручную нужно перевести HEX в RGB, затем вычислить максимум, минимум и тон по формуле преобразования RGB → HSL.