Цвета CSS: Полное руководство по RGB, HSL, LCH, LAB и HWB моделям

Опубликовано: Обновлено:
CSS предлагает разнообразные методы работы с цветом, от классических моделей RGB и HSL до современных LCH и LAB. Это руководство охватывает все актуальные цветовые функции CSS, их практическое применение в дизайн-системах, особенности браузерной поддержки и перспективные возможности стандарта.

Хорошо известные значения цвета

CSS поддерживает несколько базовых методов определения цвета, каждый из которых имеет свои особенности применения и ограничения.

Именованные цвета

Именованные цвета представляют собой наиболее простой подход к определению цвета в CSS, однако их ограниченная палитра не соответствует требованиям современных дизайн-систем.

.my-element {
  background-color: red;
}

Шестнадцатеричные значения (HEX)

Для точного контроля чаще применяются шестнадцатеричные значения:

.my-element {
  background-color: #ff0000;
}

HEX-коды характеризуются низкой читаемостью. Визуальное определение цвета по значению вроде #ff0000 затруднительно, а расчёт производных оттенков (например, затемнение на 20%) требует использования дополнительных инструментов.

RGB

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

.my-element {
  background-color: rgb(255, 0, 0); /* Чистый красный */
}

.my-element {
  background-color: rgb(255, 255, 255); /* Белый */
}

Функция rgba() расширяет модель альфа-каналом для управления прозрачностью:

.my-element {
  background-color: rgba(255, 0, 0, 0.5); /* 50% прозрачности */
}

Хотя RGB позволяет программно манипулировать цветами, результаты таких операций часто оказываются неинтуитивными.

HSL

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

.my-element {
  background-color: hsl(0deg, 100%, 20%); // тёмно-красный
}

.my-element {
  background-color: hsl(0deg, 100%, 50%); // средний красный
}

.my-element {
  background-color: hsl(0deg, 100%, 80%); // светло-красный
}

MDN: hsl()

CSS HSL цвета: оттенки красного от тёмного к светлому
CSS HSL цвета: оттенки красного от тёмного к светлому

Параметр оттенка (hue) определяет положение на цветовом круге и принимает значения от 0 до 360deg. Допустимы также угловые единицы (0.5turn) и безразмерные значения:

.my-element {
  background-color: hsl(180deg, 50%, 50%);
}

.my-element {
  background-color: hsl(0.5turn, 50%, 50%);
}

Как будет показано далее, HSL эффективно сочетается с пользовательскими свойствами CSS.

currentColor

Ключевое слово currentColor представляет особый случай — оно позволяет использовать текущий цвет текста элемента как переменную. Несмотря на ограниченную область применения по сравнению с пользовательскими свойствами, currentColor широко используется для согласования цвета заливки SVG-иконок с цветом текста родительского элемента. Подробное объяснение этой техники приведено в статье «Cascading SVG Fill Color».

Современный цветовой синтаксис

Спецификация CSS Color Module Level 4 вводит обновлённый синтаксис цветовых функций, который уже получил широкую поддержку в современных браузерах. Основные улучшения:

.my-element {
  /* Альфа-значение 0.5 задаёт 50% непрозрачность */
  background-color: hsl(0 100% 50% / 0.5);
}

.my-element {
  /* Без указания альфа-канала цвет полностью непрозрачен */
  background-color: hsl(0 100% 50%);
}

Новый синтаксис не только лаконичнее, но и обеспечивает единообразие записи различных цветовых моделей, что упрощает их использование совместно с CSS-переменными.

Новые цветовые функции CSS

HWB

Функция hwb() представляет модель HWB (Hue/оттенок, Whiteness/белизна, Blackness/чернота). Параметр оттенка (hue) работает аналогично HSL и принимает значения от 0 до 360. Параметры белизны (whiteness) и черноты (blackness) определяют процент добавления белого или чёрного к основному оттенку, где 100% соответствует полностью белому или чёрному цвету.

MDN: hwb()

При равных значениях белизны и черноты получается серый оттенок. Эта модель особенно полезна для создания монохромных палитр, так как интуитивно соответствует процессу смешивания красок.

/* Примеры цветов HWB */
.my-element {
  background-color: hwb(0 0% 0%);   /* Чистый красный */
}

.my-element {
  background-color: hwb(0 20% 20%); /* Приглушённый красный */
}

.my-element {
  background-color: hwb(0 40% 40%); /* Серо-красный */
}
Монохроматическая палитра красного цвета в модели HWB
Монохроматическая палитра красного цвета, созданная изменением параметров белизны и черноты в HWB

See the Pen

LAB

Функция lab() реализует модель LAB — аппаратно-независимое цветовое пространство, определённое в спецификации CSS Color Module Level 4. В отличие от RGB и HSL, LAB разработано для соответствия человеческому восприятию цвета и часто используется в профессиональных графических редакторах, таких как Photoshop.

MDN: lab()

Модель использует три оси:

.my-element {
  /* Красновато-розовый (положительные значения по осям A и B) */
  background-color: lab(80% 100 50);
}

.my-element {
  /* Сине-бирюзовый (отрицательные значения по осям A и B) */
  background-color: lab(80% -80 -100);
}
Сравнение красновато-розового и сине-бирюзового цветов в модели LAB
Цвета, заданные в модели LAB: красновато-розовый (lab(80% 100 50)) и сине-бирюзовый (lab(80% -80 -100))

See the Pen

Основное преимущество LAB перед традиционными моделями — перцептивная равномерность. Изменения значений в LAB пространстве более точно соответствуют тому, как человеческий глаз воспринимает разницу между цветами.

LCH

Модель LCH (Lightness/яркость, Chroma/цветность, Hue/оттенок) представляет собой полярную координатную систему, производную от LAB. Как и в LAB, параметр яркости может превышать 100%.

MDN: lch()

Оттенок работает аналогично HSL — значения от 0 до 360 градусов. Цветность (Chroma) определяет насыщенность цвета и теоретически не ограничена, в отличие от насыщенности в HSL.

.my-element {
  /* Цвет с умеренной цветностью */
  background-color: lch(80% 100 50);
}

.my-element {
  /* Цвет с высокой цветностью — может выходить за пределы отображаемого диапазона */
  background-color: lch(80% 240 50);
}
Сравнение цветов LCH с цветностью 100 и 240. Цвет с высокой цветностью может выходить за пределы отображаемого диапазона мониторов.
Цвет с цветностью 240 (справа) может превышать отображаемый диапазон современных мониторов, что приводит к клиппингу цвета

Как и другие современные цветовые функции, lch() поддерживает альфа-канал:

.my-element {
  background-color: lch(80% 240 50 / 0.5); /* 50% непрозрачности */
}

Преимущества LCH перед HSL

  1. Расширенный цветовой охват — LCH предоставляет доступ к более широкому диапазону цветов, соответствующих возможностям человеческого зрения.
  2. Перцептивная равномерность — изменение параметров в этой модели более точно соответствует визуальному восприятию. В отличие от HSL, где одинаковая яркость воспринимается по-разному для различных оттенков, в LCH-пространстве равные значения яркости выглядят согласованно.
  3. Предсказуемость манипуляций — операции с цветом (осветление, затемнение, изменение насыщенности) в этом формате дают более интуитивно понятные результаты.

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

В демонстрации сравнения LCH и HSL наглядно показана разница в восприятии яркости. При переключении в градации серого (Grayscale: On) квадраты LCH сохраняют одинаковую видимую яркость, в то время как квадраты HSL демонстрируют заметные различия.

See the Pen

Таблицы цветности и оттенка LCH и HSL. Квадраты LCH сохраняют одинаковую воспринимаемую яркость, в отличие от HSL.
Сравнение перцептивной равномерности: квадраты LCH (слева) сохраняют одинаковую воспринимаемую яркость, в отличие от квадратов HSL (справа)

Разница также заметна при создании градиентов. Градиенты LCH выглядят более плавными и равномерными, поскольку интерполяция происходит в перцептивно однородном пространстве.

Сравнение градиентов LCH (сверху) и HSL (снизу). Градиент LCH выглядит более плавным и равномерным.
Градиент LCH (верхний) демонстрирует более плавные переходы по сравнению с HSL-градиентом (нижний)

See the Pen

Дополнительные ресурсы

Для глубокого понимания преимуществ LCH рекомендуется статья Леи Веру «LCH colors in CSS: what, why, and how?». Также будет полезен интерактивный подборщик цветов LCH.

Однако существует ограничение на то, сколько цветов браузеры и мониторы могут отображать сегодня (подробнее об этом чуть позже), поэтому значение выше 230 вряд ли будут иметь значение — Цветность снижается, пока не окажется в пределах отображаемого диапазона.

Поддержка браузером и цветовые пространства

Поддержка современных цветовых функций в браузерах постепенно расширяется:

Несмотря на растущую поддержку, для совместимости со старыми браузерами рекомендуется предоставлять резервные варианты. Браузеры игнорируют неподдерживаемые правила, что позволяет использовать прогрессивное улучшение:

.my-element {
  /* Резервный вариант в RGB */
  background-color: rgb(98.38% 0% 53.33%);
  /* Современный вариант LCH */
  background-color: lch(55% 102 360);
}

Для условного применения стилей можно использовать @supports:

@supports (background-color: lch(55% 102 360)) {
  .my-element {
    /* Стили только для браузеров с поддержкой LCH */
    background-color: lch(55% 102 360);
  }
}

Важное ограничение касается цветовых пространств: большинство браузеров по-прежнему работают в sRGB, даже на мониторах с расширенным цветовым охватом. Значения lab() и lch(), выходящие за пределы sRGB, подвергаются клиппингу — в демонстрациях перемещение ползунка за определённую границу может не влиять на отображаемый цвет.

Для работы с расширенным цветовым охватом Safari и Chrome поддерживают функцию color() с пространством Display-P3, позволяя использовать более насыщенные цвета современных экранов:

.my-element {
  background: rgb(98.38% 0% 53.33%); /* sRGB */
  background: color(display-p3 0.947 0 0.5295); /* эквивалент в P3 */
}

Однако даже P3 не обеспечивает всех преимуществ LAB и LCH, таких как перцептивная равномерность и аппаратно-независимое представление цвета.

Доступность

Современные цветовые модели, такие как LAB и LCH, потенциально могут улучшить доступность веб-интерфейсов. Благодаря перцептивной равномерности этих пространств, цвета с одинаковой яркостью сохраняют схожий визуальный контраст независимо от оттенка и насыщенности.

В отличие от HSL, где одинаковые значения яркости могут восприниматься по-разному для различных оттенков, LCH обеспечивает более предсказуемое соотношение контрастности. Это упрощает подбор цветовых пар, соответствующих рекомендациям WCAG по минимальному коэффициенту контрастности.

Однако широкое внедрение этих возможностей зависит от поддержки браузерами. Когда LAB и LCH получат повсеместную поддержку, разработчики смогут создавать более доступные цветовые схемы, опираясь на объективные метрики восприятия, а не на эмпирические преобразования в sRGB.

Управление цветом

Расширенный набор цветовых функций предоставляет больше возможностей для системного управления палитрой в дизайн-системах. Часто возникает необходимость создавать вариации одного цвета — от тёмных до светлых оттенков.

Пользовательские свойства

CSS-переменные (пользовательские свойства) позволяют декомпозировать цветовые значения, что упрощает манипуляции. Например, HSL хорошо подходит для такого подхода благодаря интуитивно понятным компонентам:

li {
  --hue: calc(var(--i) * (360 / 10));
  background: hsl(var(--hue, 0) 50% 45%);
}

Этот подход также позволяет вычислять комплементарные цвета и другие производные оттенки программно. Подробнее о методах работы с HSL через переменные можно прочитать в статье Сары Суейдан «Managing colors with HSL».

Миграция с RGB на HSL

Если текущая палитра основана на RGB или HEX, переход на HSL (или LCH при наличии поддержки) повышает гибкость работы с цветами. Рекомендуется сочетать этот переход с CSS-переменными:

:root {
  --h: 265;
  --s: 70%;
  --l: 50%;

  --primary: hsl(var(--h) var(--s) var(--l));
  --primary-dark: hsl(var(--h) var(--s) 35%);
  --primary-light: hsl(var(--h) var(--s) 75%);
}

Такой подход позволяет централизованно управлять всей цветовой схемой, быстро адаптируя её под разные темы (светлая, тёмная, приглушённая). Метод подробно описан в статье Адама Аргайла «Building a Color Scheme».

Цветовые функции Sass

Sass предоставляет встроенные функции для манипуляции цветами (lighten(), darken(), saturate() и др.), однако они имеют два ключевых ограничения:

  1. Работают только на этапе компиляции, не в браузере.
  2. Основаны на RGB/HSL, поэтому наследуют проблемы с перцептивной неравномерностью.

В результате, например, изменение насыщенности может неожиданно влиять на воспринимаемую яркость. Для более предсказуемого поведения можно использовать переменные с LCH:

li {
  --hue: calc(var(--i) * (360 / 10));
  background: lch(50% 45 var(--hue, 0));
}

Это обеспечивает равномерную яркость при изменении других параметров цвета.

Смешивание цветов и манипуляции

Смешивание цветов

Функция color-mix(), определённая в CSS Color Module Level 5, позволяет смешивать цвета непосредственно в CSS. В отличие от аналогов в препроцессорах, она поддерживает указание цветового пространства для интерполяции. По умолчанию используется LCH, что обеспечивает более естественный результат смешения:

.my-element {
  /* Равное смешение красного и синего в пространстве LCH */
  background-color: color-mix(in lch, red, blue);

  /* 30% красного, 70% синего */
  background-color: color-mix(in lch, red 30%, blue);
}

MDN: color-mix()

функция color-mix() получила широкую поддержку в браузерах и активно используется в проектах: CSS Color Module Level 5 (рабочий проект) содержит предложения по функциям смешивания цветов, которые звучат многообещающе. Первая функция color-mix() смешивает два цвета, как mix() в Sass, но color-mix() в CSS позволяет указать цветовое пространство и по умолчанию использует LCH, в результате чего достигается превосходное смешивание.

Цветовая контрастность и доступность

color-contrast() экспериментальная функция CSS Color Module Level 5 (доступная в технологическом превью Safari) предназначена для автоматического выбора доступных цветовых пар согласно рекомендациям WCAG. Она анализирует предложенные цвета и выбирает вариант с достаточным коэффициентом контрастности:

.my-element {
  color: wheat;
  background-color: color-contrast(
    wheat vs bisque, darkgoldenrod, olive,
    sienna, darkgreen, maroon to AA
  );
}

Браузер проверяет цвета последовательно и выбирает первый, соответствующий указанному уровню контрастности (в примере — AA). Если ни один вариант не проходит порог, используется наиболее контрастный цвет из списка.

Функция contrast-color() представляет собой альтернативный подход к выбору контрастных цветов. Она автоматически подбирает цвет с достаточным контрастом относительно заданного фона:

.my-element {
  background-color: #123456;
  color: contrast-color(#123456);
}

contrast-color() предназначена для упрощения создания доступных интерфейсов, где требуется гарантированная читаемость текста на произвольном фоне.

Заключение

Современные цветовые модели CSS — от классических RGB и HSL до перспективных LAB, LCH и HWB — значительно расширяют возможности веб-разработчиков в работе с цветом. Каждая модель имеет свои преимущества:

Появление функций color-mix(), color-contrast() и contrast-color() открывает новые возможности для динамического управления цветом непосредственно в CSS, уменьшая зависимость от препроцессоров и JavaScript.

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

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

Предыдущая Статья

Vim: Стань HTML-ниндзя с Emmet

Следующая Статья

CSS: Анимация подчёркивания ссылок