Цветовые форматы: руководство по конвертации HEX, RGB, HSL

Каждый пиксель на вашем экране определяется числами. Но один и тот же цвет можно выразить в нескольких форматах — HEX, RGB, HSL, HSB и других. Понимание этих форматов и знание, когда использовать каждый из них, делает вас более эффективным разработчиком и дизайнером.

Цветовые модели

RGB (Red, Green, Blue)

RGB — это аддитивная цветовая модель, основанная на принципе работы экранов. Каждый пиксель — это комбинация красного, зелёного и синего света различной интенсивности.

color: rgb(59, 130, 246);       /* Сплошной синий */
color: rgba(59, 130, 246, 0.5); /* Синий с 50% прозрачностью */

Каждый канал принимает значения от 0 (отсутствие) до 255 (максимальная интенсивность):

rgb(0, 0, 0) = Чёрный (нет света)
rgb(255, 255, 255) = Белый (весь свет)
rgb(255, 0, 0) = Чистый красный

Когда использовать RGB: Программные манипуляции с цветом, операции на canvas, обработка изображений. RGB напрямую соответствует аппаратному обеспечению, что упрощает вычисления.

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

HEX — это просто RGB, записанный в шестнадцатеричной нотации. Каждая пара символов представляет один канал (00-FF):

color: #3B82F6;   /* Тот же синий, что и rgb(59, 130, 246) */
color: #3B82F680; /* С 50% альфа-каналом (8-значный hex) */

Конвертация прямая: 3B = 59, 82 = 130, F6 = 246.

Сокращённая запись: Если каждая пара содержит одинаковые цифры, можно сократить: #AABBCC → #ABC

Когда использовать HEX: CSS-стили (самый распространённый формат), дизайн-макеты, руководства по фирменному стилю. HEX компактен и понятен повсеместно.

HSL (Hue, Saturation, Lightness)

HSL представляет цвета так, как их воспринимает человек. Вместо смешивания световых каналов вы описываете цвет его свойствами:

Hue (тон): Угол на цветовом круге (0-360°). 0° = красный, 120° = зелёный, 240° = синий
Saturation (насыщенность): Насколько ярок цвет (0% = серый, 100% = полный цвет)
Lightness (светлота): Насколько светлый цвет (0% = чёрный, 50% = чистый цвет, 100% = белый)

color: hsl(217, 91%, 60%);       /* Тот же синий */
color: hsla(217, 91%, 60%, 0.5); /* С альфа-каналом */

Когда использовать HSL: Создание цветовых палитр, программная корректировка цветов (например, создание состояний при наведении изменением светлоты), проектирование с учётом доступности. HSL — наиболее интуитивный формат для человеческого восприятия цвета.

HSB/HSV (Hue, Saturation, Brightness/Value)

HSB похож на HSL, но определяет яркость иначе. При максимальной яркости вы получаете чистый цвет; при минимальной — чёрный. Эта модель используется в инструментах дизайна, таких как Figma, Sketch и Photoshop.

Ключевое отличие от HSL: В HSL светлота 50% даёт чистый цвет. В HSB яркость 100% даёт чистый цвет. Это делает HSB более интуитивным для некоторых задач, но менее полезным в CSS (который не поддерживает HSB нативно).

Конвертация между форматами

Преобразование между форматами включает простую математику. Вот основные связи:

HEX в RGB

Разделите hex-строку на пары и переведите каждую в десятичное число:

#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB в HSL

Алгоритм нормализует значения RGB до диапазона 0-1, находит максимальный и минимальный каналы, затем вычисляет тон на основе доминирующего канала, насыщенность из диапазона значений и светлоту из среднего значения.

Вместо ручной реализации этих преобразований используйте наш Конвертер цветов для мгновенного перевода между любыми форматами.

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

Построение цветовых палитр с помощью HSL

HSL отлично подходит для генерации согласованных палитр. Сохраняйте тон постоянным и варьируйте насыщенность и светлоту:

:root {
  --blue-100: hsl(217, 91%, 95%);  /* Самый светлый */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* Базовый */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* Самый тёмный */
}

Этот подход гарантирует перцептивно согласованные шаги. Создаёте полную палитру вручную? Наш Генератор цветовых палитр автоматизирует этот процесс.

Состояния наведения и фокуса

С HSL создание интерактивных состояний тривиально:

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* На 5% темнее */
}
.button:active {
  background: hsl(217, 91%, 50%); /* На 10% темнее */
}

Доступность и контраст

WCAG 2.1 требует минимальный коэффициент контрастности 4.5:1 для обычного текста и 3:1 для крупного текста. Компонент светлоты в HSL даёт интуитивный способ обеспечить достаточный контраст:

Светлые фоны (светлота > 90%) хорошо сочетаются с тёмным текстом (светлота < 30%)
Тёмные фоны (светлота < 20%) хорошо сочетаются со светлым текстом (светлота > 80%)

Современные CSS-функции для работы с цветом

CSS теперь поддерживает мощные функции манипулирования цветом:

/* Синтаксис относительных цветов (CSS Color Level 4) */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch — перцептивно равномерное цветовое пространство */
color: oklch(0.7 0.15 250);

Формат oklch набирает популярность, потому что он перцептивно равномерен — одинаковые числовые изменения дают одинаковые воспринимаемые изменения, в отличие от HSL, где изменение светлоты на 10% выглядит по-разному при разных значениях тона.

FAQ

Какой цветовой формат использовать в CSS?

Для большинства проектов используйте HEX для простых цветов и HSL, когда нужно создавать вариации или программно манипулировать цветами. HEX — самый компактный и широко узнаваемый формат. HSL более читаем при построении цветовых систем. Современный CSS поддерживает все форматы взаимозаменяемо.

В чём разница между HSL и HSB?

HSL и HSB оба используют тон и насыщенность, но по-разному определяют яркость. В HSL светлота 0% — это чёрный, 50% — чистый цвет, 100% — белый. В HSB яркость 0% — это чёрный, 100% — чистый цвет (нет пути к белому только через яркость). CSS нативно поддерживает HSL; HSB используется преимущественно в инструментах дизайна, таких как Figma и Photoshop.

Связанные ресурсы

Конвертер цветов — Мгновенная конвертация между HEX, RGB, HSL и HSB
Генератор цветовых палитр — Создание гармоничных цветовых палитр
Руководство по CSS-градиентам — Создание красивых градиентов с помощью CSS