В веб-разработке цвет задаётся несколькими способами. Выбор формата влияет на читаемость кода, удобство правок и возможность программной генерации оттенков. В этой статье разберём HEX, RGB, HSL и HSV — их структуру, преимущества и типичные сценарии применения.
Для быстрой конвертации между форматами используйте Color Converter на reChecker.
HEX (шестнадцатеричный)
Самый распространённый формат в веб-дизайне. Синтаксис: #RRGGBB или краткий #RGB.
color: #3b82f6; /* синий */
color: #f00; /* красный, краткая форма */
color: #3b82f680; /* с альфа-каналом (8 символов) */
Структура
| Формат | Описание | Пример |
|---|---|---|
| #RRGGBB | 6 символов, по 2 на канал | #3b82f6 |
| #RGB | 3 символа, каждый удваивается | #f00 → #ff0000 |
| #RRGGBBAA | 8 символов, последние 2 — прозрачность | #3b82f680 |
Когда использовать
- Фиксированные цвета из макета (дизайнеры чаще отдают HEX)
- Когда важна компактность
- В HTML-атрибутах и инлайновых стилях
Ограничения
- Неинтуитивен для ручной настройки оттенков
- Сложно программно осветлять/затемнять без конвертации
RGB и RGBA
Красный, зелёный, синий — аддитивная модель. Каждый канал от 0 до 255.
color: rgb(59, 130, 246);
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5); /* современный синтаксис с / */
Когда использовать
- Когда цвет приходит из API или вычисляется в JavaScript
- Для динамической прозрачности (четвёртый параметр)
- В canvas, WebGL и других графических API
Сравнение с HEX
| Критерий | HEX | RGB |
|---|---|---|
| Читаемость | Ниже для человека | Выше, числа понятнее |
| Программная работа | Требует парсинга | Удобно: массив [r,g,b] |
| Поддержка альфы | #RRGGBBAA | rgba() или rgb() с / |
HSL (Hue, Saturation, Lightness)
Модель, ориентированная на восприятие. Удобна для генерации палитр.
color: hsl(217, 91%, 60%); /* hue, saturation%, lightness% */
color: hsla(217, 91%, 60%, 0.8);
color: hsl(217 91% 60% / 0.8); /* современный синтаксис */
Параметры
| Параметр | Диапазон | Описание |
|---|---|---|
| Hue | 0–360 | Оттенок (0/360 — красный, 120 — зелёный, 240 — синий) |
| Saturation | 0–100% | Насыщенность (0 — серый, 100 — чистый цвет) |
| Lightness | 0–100% | Яркость (0 — чёрный, 50 — норма, 100 — белый) |
Когда использовать
- Генерация оттенков: меняете Lightness — получаете светлее/темнее
- Создание палитр из одного базового цвета
- Цветовые схемы (complementary, triadic) — сдвиг Hue на 120°, 180° и т.д.
Пример: палитра из одного оттенка
:root {
--primary: hsl(217, 91%, 60%);
--primary-light: hsl(217, 91%, 70%);
--primary-dark: hsl(217, 91%, 50%);
--primary-muted: hsl(217, 30%, 60%); /* меньше saturation */
}
HSV (Hue, Saturation, Value)
Альтернатива HSL. Value — яркость от чёрного до чистого цвета. В CSS нативно не поддерживается, но используется в пиккерах и графических редакторах.
| Параметр | Описание |
|---|---|
| Hue | 0–360, как в HSL |
| Saturation | 0–100%, доля цвета |
| Value | 0–100%, яркость (0 — чёрный, 100 — максимальная яркость цвета) |
HSL vs HSV
- HSL: Lightness 50% — «чистый» цвет; выше — белеет, ниже — чернеет
- HSV: Value 100% — максимальная яркость; Saturation управляет «разбавлением» белым
В веб-разработке HSL распространён больше из-за нативной поддержки в CSS. HSV часто встречается в дизайн-инструментах (Figma, Photoshop).
Сравнительная таблица
| Формат | CSS-поддержка | Удобство для палитр | Типичное применение |
|---|---|---|---|
| HEX | Да | Низкое | Макеты, фиксированные цвета |
| RGB | Да | Среднее | Динамика, API |
| HSL | Да | Высокое | Палитры, темы |
| HSV | Нет (конвертация) | Высокое | Дизайн-инструменты |
Практические рекомендации
1. Храните в HSL, экспортируйте в HEX
Для тем и палитр удобно хранить базовые цвета в HSL. При сборке или в runtime конвертируйте в HEX для совместимости со старыми браузерами или инструментами.
2. Используйте CSS-переменные
:root {
--color-primary-h: 217;
--color-primary-s: 91%;
--color-primary-l: 60%;
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
}
Так можно менять оттенок через одну переменную.
3. Конвертация в JavaScript
// HSL to HEX (упрощённо)
function hslToHex(h, s, l) {
s /= 100;
l /= 100;
const c = (1 - Math.abs(2 * l - 1)) * s;
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = l - c / 2;
let r = 0, g = 0, b = 0;
if (h < 60) { r = c; g = x; }
else if (h < 120) { r = x; g = c; }
else if (h < 180) { g = c; b = x; }
else if (h < 240) { g = x; b = c; }
else if (h < 300) { r = x; b = c; }
else { r = c; b = x; }
return '#' + [r, g, b].map(v => Math.round((v + m) * 255).toString(16).padStart(2, '0')).join('');
}
Для продакшена лучше использовать библиотеку (например, chroma.js) или Color Converter reChecker для ручной проверки.
4. Доступность
Независимо от формата проверяйте контраст текста и фона. После конвертации в нужный формат через Color Converter используйте отдельные инструменты проверки контраста для соответствия WCAG.
Цветовое пространство sRGB и display-p3
По умолчанию веб использует sRGB. Современные дисплеи поддерживают более широкую палитру (display-p3). В CSS можно использовать color() с указанием пространства:
color: color(display-p3 0.4 0.2 0.8);
Поддержка пока ограничена. Для большинства проектов sRGB (HEX, RGB, HSL) достаточно. Расширенные пространства — для дизайна с особыми требованиями к цвету.
Тёмная тема и цветовые переменные
При переключении темы меняйте значения CSS-переменных. HSL удобен для программного осветления/затемления:
:root {
--bg: hsl(0, 0%, 100%);
--text: hsl(0, 0%, 10%);
}
[data-theme="dark"] {
--bg: hsl(0, 0%, 10%);
--text: hsl(0, 0%, 95%);
}
Один и тот же компонент использует переменные — переключение темы не требует правок в компонентах.
Итог
- HEX — для фиксированных цветов из макетов
- RGB — для динамики и работы с альфой в коде
- HSL — для палитр, тем и программной генерации оттенков
- HSV — в дизайн-инструментах; в CSS только через конвертацию
Выбор формата зависит от контекста. Используйте Color Converter для быстрого переключения между форматами при работе с цветами.