Цветовые модели HEX, RGB, HSL: отличия и формулы перевода
Браузеры поддерживают несколько нотаций для задания цветов в CSS. Выбор формата влияет не только на читаемость кода, но и на удобство программной генерации цветовых схем, реализации тёмной темы и анимаций. В руководстве разбираем математику каждого формата и рекомендации по применению.
HEX (#RRGGBB): шестнадцатеричная нотация
#FF0000 = красный (R=255, G=0, B=0)
#00FF00 = зелёный
#0000FF = синий
#2DD4BF = фирменный cyan Utilora (R=45, G=212, B=191)
Сокращённая запись #RGB работает когда оба символа каждой пары идентичны: #FFF = #FFFFFF, #000 = #000000, #F00 = #FF0000.
HEX с альфа-каналом (#RRGGBBAA) — формат CSS Color Level 4: #2DD4BF80 задаёт тот же cyan с 50% прозрачностью (80 в hex = 128 из 255 = 50.2%).
Полезный инструмент: Интерактивно протестировать перевод между цветовыми моделями позволяет наша палитра и пипетка цветов онлайн.
Полезный инструмент: Для сокращения размера стилевых файлов с цветами применяйте минификатор CSS.
RGB и RGBA: десятичная нотация
color: rgb(45, 212, 191);
Функция rgba() добавляет четвёртый канал альфа (прозрачность) в диапазоне 0.0–1.0:
color: rgba(45, 212, 191, 0.5); /* 50% прозрачность */
С CSS Color Level 4 (поддерживается во всех современных браузерах) запятые опциональны:
color: rgb(45 212 191 / 50%);
RGB удобен для программной генерации цветов в JavaScript:
const r = 45, g = 212, b = 191;
const hex = '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');HSL: оттенок, насыщенность, светлота
• Hue (оттенок): угол на цветовом колесе 0°–360°. 0°=красный, 120°=зелёный, 240°=синий, 300°=пурпурный.
• Saturation (насыщенность): 0% — серый, 100% — максимально насыщенный цвет.
• Lightness (светлота): 0% — чёрный, 50% — обычный цвет, 100% — белый.
Главное преимущество HSL: генерация вариаций цвета. Чтобы создать более светлый оттенок того же цвета:
hsl(174, 62%, 50%) /* базовый */
hsl(174, 62%, 70%) /* светлее на 20% — просто меняем L */
hsl(174, 62%, 30%) /* темнее */
Для тёмных тем: поднять L с 50% до 70–80%; для акцентов: поднять S до 90–100%.
Конвертация между форматами
R = parseInt(hex.slice(1,3), 16)
G = parseInt(hex.slice(3,5), 16)
B = parseInt(hex.slice(5,7), 16)
Алгоритм RGB → HSL:
1. Нормализовать R, G, B к диапазону 0.0–1.0 (делить на 255)
2. Найти max и min из трёх значений
3. L = (max + min) / 2
4. S = (max - min) / (1 - |2L - 1|) если L ≠ 0 или 1
5. H вычисляется в зависимости от того, какой канал является максимальным
Конвертация HSL → RGB использует обратное преобразование через промежуточную функцию hue2rgb с кусочно-линейной интерполяцией.
Попробуйте онлайн-инструменты по этой теме
Используйте бесплатные утилиты Utilora прямо в браузере без регистрации:
Color Picker (HEX / RGB / HSL)
Визуальный выбор цвета, мгновенная конвертация между HEX, RGB и HSL, проверка читаемости текста (WCAG) и готовая палитра.
Запустить ▸Хэш-генератор
Мгновенное вычисление криптографических хэшей MD5 (RFC 1321), SHA-1, SHA-256 и SHA-512 в браузере с аппаратным ускорением Web Crypto API.
Запустить ▸Base64 Кодер / Декодер
Кодирование текста и файлов в Base64 и обратное декодирование с корректной поддержкой UTF-8 кириллицы.
Запустить ▸Часто задаваемые вопросы (FAQ)
Модель HSL (Hue, Saturation, Lightness) интуитивно понятна человеку. Чтобы сделать оттенок светлее для псевдокласса :hover или темнее для активной кнопки, достаточно изменить один параметр Lightness (с 50% до 60%), не пересчитывая цветовые каналы R, G и B.
Используйте 8-значный синтаксис #RRGGBBAA, где последние два символа задают альфа-канал от 00 (полная прозрачность) до FF (непрозрачный цвет). Например, #00000080 соответствует черному цвету с прозрачностью 50% (аналог rgba(0, 0, 0, 0.5)).
В спецификации CSS Color Module Level 4 каналы разделяются пробелами, а прозрачность отделяется слэшем. Функции rgb() и rgba() стали взаимозаменяемыми синонимами и поддерживают альфа-канал как в процентах, так и в десятичных долях.
Пространство Display P3 на современных дисплеях охватывает примерно на 50% больше насыщенных оттенков зелёного и красного спектра по сравнению с sRGB. В CSS такие цвета задаются функцией color(display-p3 r g b).
Используйте конвертер цветов HEX в RGB / HSL на Utilora: введите цветовой код в любом удобном формате, и сервис моментально покажет эквиваленты во всех нотациях с предпросмотром контрастности.