Цвета в вебе: HEX, RGB, HSL, HSV — что когда использовать

В веб-разработке цвет задаётся несколькими способами. Выбор формата влияет на читаемость кода, удобство правок и возможность программной генерации оттенков. В этой статье разберём HEX, RGB, HSL и HSV — их структуру, преимущества и типичные сценарии применения.

Для быстрой конвертации между форматами используйте Color Converter на reChecker.

HEX (шестнадцатеричный)

Самый распространённый формат в веб-дизайне. Синтаксис: #RRGGBB или краткий #RGB.

color: #3b82f6;   /* синий */
color: #f00;      /* красный, краткая форма */
color: #3b82f680; /* с альфа-каналом (8 символов) */

Структура

Когда использовать

• Фиксированные цвета из макета (дизайнеры чаще отдают 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

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); /* современный синтаксис */

Параметры

Когда использовать

• Генерация оттенков: меняете 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 нативно не поддерживается, но используется в пиккерах и графических редакторах.

HSL vs HSV

• HSL: Lightness 50% — «чистый» цвет; выше — белеет, ниже — чернеет
• HSV: Value 100% — максимальная яркость; Saturation управляет «разбавлением» белым

В веб-разработке HSL распространён больше из-за нативной поддержки в CSS. HSV часто встречается в дизайн-инструментах (Figma, Photoshop).

Сравнительная таблица

Практические рекомендации

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 для быстрого переключения между форматами при работе с цветами.