Функции цвета CSS: сравнение rgb(), hsl(), oklch()

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

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

rgb() и rgba()

Функция rgb() — прямое CSS-выражение цветовой модели RGB: три числа от 0 до 255, по одному для красного, зелёного и синего.

color: rgb(59, 130, 246);     /* Яркий синий */
color: rgb(255, 87, 51);      /* Тёплый коралловый красный */
color: rgb(0, 0, 0);          /* Чёрный */
color: rgb(255, 255, 255);    /* Белый */

rgba() — историческая форма для добавления прозрачности с четвёртым аргументом от 0 (прозрачный) до 1 (непрозрачный):

color: rgba(59, 130, 246, 0.5);   /* Тот же синий при 50% прозрачности */

Современный синтаксис rgb()

В CSS Color Level 4 (полностью поддерживается всеми современными браузерами с 2023 года) rgb() был обновлён для принятия альфа-канала напрямую, делая rgba() избыточным:

/* Теперь они эквивалентны */
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5);

Новый синтаксис с пробелами и косой чертой перед значением альфа работает с rgb(), hsl() и другими функциями. Обе формы работают — обе встречаются в существующих кодовых базах.

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

rgb() наиболее полезен, когда: - Вы работаете с HEX-цветом и хотите видеть значения каналов напрямую - Вам нужно анимировать отдельные каналы R, G или B через пользовательские свойства CSS - Вы генерируете цвета программно и исходные данные уже в RGB

Его слабость в том, что человеческая интуиция плохо соответствует RGB. Трудно посмотреть на rgb(107, 142, 35) и понять, что получится оливково-зелёный. Для дизайнерской работы HSL или OKLCH более интуитивны.

hsl() и hsla()

HSL расшифровывается как Оттенок (Hue), Насыщенность (Saturation), Светлота (Lightness). Он отображает цвета на цилиндр, а не куб, что гораздо ближе к тому, как дизайнеры реально думают о цвете.

• Оттенок: градус на цветовом круге от 0 до 360 (0 = красный, 120 = зелёный, 240 = синий)
• Насыщенность: 0% (серый, нет цвета) до 100% (полная яркость)
• Светлота: 0% (чёрный) до 100% (белый), с 50% как «чистым» цветом

color: hsl(217, 91%, 60%);    /* Яркий синий */
color: hsl(9, 100%, 60%);     /* Тёплый коралловый красный */
color: hsl(80, 60%, 35%);     /* Оливково-зелёный */
color: hsl(0, 0%, 50%);       /* Чистый средний серый */

hsla() добавляет альфа-канал, идентично паттерну rgb() / rgba():

color: hsla(217, 91%, 60%, 0.5);  /* Синий при 50% прозрачности */
color: hsl(217 91% 60% / 0.5);   /* То же с современным синтаксисом */

Почему hsl() изменил веб-разработку

До появления hsl() в CSS 2.1 (2011) изменение светлоты или насыщенности цвета в CSS требовало возврата к HEX-коду или RGB-значениям и пересчёта с нуля. С hsl() можно тривиально создавать согласованные вариации цвета:

:root {
  --blue-h: 217;
  --blue-s: 91%;
}

.btn {
  background: hsl(var(--blue-h), var(--blue-s), 60%);    /* Базовый */
}
.btn:hover {
  background: hsl(var(--blue-h), var(--blue-s), 50%);    /* Темнее при наведении */
}
.btn:active {
  background: hsl(var(--blue-h), var(--blue-s), 40%);    /* Ещё темнее */
}

Проблема с hsl()

Несмотря на интуитивную привлекательность, HSL имеет фундаментальный недостаток: он не является перцептуально равномерным. Равные числовые шаги в HSL не производят цвета, которые выглядят одинаково различающимися для человеческого глаза.

Наиболее очевидный симптом — жёлтый. Чистый HSL-жёлтый (hsl(60, 100%, 50%)) выглядит гораздо ярче и интенсивнее, чем чистый HSL-синий (hsl(240, 100%, 50%)), несмотря на одинаковые значения насыщенности и светлоты. Это затрудняет создание цветовых шкал, где разные оттенки ощущаются визуально сбалансированными.

По этой причине современная работа с цветом CSS всё больше движется в сторону OKLCH.

lab() и lch()

CSS Color Level 4 ввёл lab() и lch() на основе цветового пространства CIE L*a*b*, разработанного учёными-цветоведами для перцептуальной равномерности — равные числовые различия соответствуют равным воспринимаемым различиям в цвете.

lab()

lab() использует три оси: - L: Светлота от 0 (чёрный) до 100 (белый) - a: Позиция на оси зелёный-красный (отрицательная = зелёный, положительная = красный) - b: Позиция на оси синий-жёлтый (отрицательная = синий, положительная = жёлтый)

color: lab(53 -5 -60);    /* Яркий синий */
color: lab(55 60 40);     /* Тёплый красно-оранжевый */
color: lab(80 -15 20);    /* Мягкий оливково-лаймовый */

Оси a и b менее интуитивны, чем градусы оттенка, что делает lab() несколько трудным для написания вручную. Он наиболее полезен программно — например, при вычислении перцептуально равномерных градиентов или соотношений контраста.

lch()

lch() — цилиндрическая переработка Lab с использованием Светлоты (Lightness), Хромы (Chroma, аналог насыщенности) и Оттенка (Hue):

color: lch(53 60 265);    /* Яркий синий (L=53, C=60, H=265°) */
color: lch(60 55 25);     /* Тёплый оранжево-красный */

Оттенок в lch() приблизительно (но не идентично) соответствует оттенку в hsl(). Ключевое различие в том, что светлота и хрома в lch() перцептуально значимы — два цвета при lch(70 40 X) будут выглядеть одинаково яркими вне зависимости от оттенка, что не верно для hsl().

Когда использовать lab() и lch()

Эти функции отлично подходят для: - Генерации доступных цветовых пар с предсказуемым воспринимаемым контрастом - Создания палитр визуализации данных, где цвета ощущаются равновесными - Создания плавных, естественно выглядящих градиентов

Для большинства новых задач они были вытеснены oklch(), который более точен и имеет лучшую поддержку инструментов.

oklch()

OKLCH — это современный стандарт для задания цвета в CSS. Он основан на цветовом пространстве Oklab, разработанном Бьёрном Оттоссоном в 2020 году, которое улучшает CIE Lab с лучшей перцептуальной равномерностью — особенно для синих и фиолетовых оттенков, с которыми CIE Lab справляется плохо.

Функция принимает три значения плюс необязательный альфа:

• L: Светлота от 0 (чёрный) до 1 (белый)
• C: Хрома (интенсивность цвета), обычно от 0 до 0,4
• H: Угол оттенка в градусах от 0 до 360

color: oklch(0.62 0.19 250);    /* Яркий синий */
color: oklch(0.65 0.22 25);     /* Тёплый красно-оранжевый */
color: oklch(0.85 0.08 130);    /* Мягкий зелёный */
color: oklch(0.62 0.19 250 / 0.5); /* Синий при 50% прозрачности */

Почему oklch() важен

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

/* Все они выглядят одинаково «средними» в OKLCH */
--red:    oklch(0.65 0.25 15);
--green:  oklch(0.65 0.18 145);
--blue:   oklch(0.65 0.19 250);
--yellow: oklch(0.65 0.15 90);

Попробуйте достичь этого с помощью hsl() — жёлтый будет заметно ярче синего.

Доступ к широкой гамме. OKLCH может выражать цвета за пределами гаммы sRGB, давая доступ к ярким цветам, доступным на современных дисплеях (iPhone, MacBook Pro, большинство ноутбуков 2023+), поддерживающих Display P3 или шире. HEX-коды и rgb() ограничены sRGB:

/* Этот яркий зелёный возможен только с oklch — за пределами sRGB */
color: oklch(0.72 0.30 145);

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

Лучшая интерполяция градиентов. Цвета, интерполируемые (анимируемые или градиентируемые) в OKLCH, проходят через перцептуально промежуточные цвета. Пресловутая «серая грязная середина», появляющаяся в RGB-градиентах между дополнительными цветами, в OKLCH не возникает.

oklch() в системах дизайна

Всё большее число систем дизайна и CSS-фреймворков принимают OKLCH для своих цветовых шкал. Если вы создаёте систему дизайна с нуля в 2025 году или позже, OKLCH — рекомендуемая отправная точка. Используйте конвертер цветов для перевода любого существующего HEX-кода в его OKLCH-эквивалент.

color-mix()

color-mix() — более новая функция CSS, смешивающая два цвета в заданном цветовом пространстве и пропорции:

/* Смешать синий и красный поровну в oklch */
color: color-mix(in oklch, #3B82F6 50%, #EF4444 50%);

/* Создать более светлый оттенок: смешать с белым */
color: color-mix(in oklch, oklch(0.62 0.19 250) 60%, white);

/* Создать более тёмный оттенок: смешать с чёрным */
color: color-mix(in oklch, oklch(0.62 0.19 250) 70%, black);

in oklch (или in srgb, in hsl и т.д.) задаёт цветовое пространство для вычисления смешивания, что существенно влияет на результат.

Почему цветовое пространство важно для смешивания

Смешивание в sRGB часто даёт тусклые, десатурированные средние точки между дополнительными цветами. Смешивание в OKLCH даёт перцептуально яркие промежуточные цвета — потому что интерполяция OKLCH следует тому же пути, который проходит восприятие человека.

/* Смешивание синего и жёлтого в sRGB часто даёт тусклый оливковый/серый */
color: color-mix(in srgb, blue, yellow);

/* Смешивание в oklch даёт яркий зелёный промежуточный */
color: color-mix(in oklch, blue, yellow);

Практические случаи использования color-mix()

Генерация вариантов темы. Вместо жёсткого задания пяти вариантов оттенка фирменного цвета генерируйте их динамически:

:root {
  --brand: oklch(0.55 0.22 250);
  --brand-light: color-mix(in oklch, var(--brand) 50%, white);
  --brand-lighter: color-mix(in oklch, var(--brand) 25%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 80%, black);
}

Адаптация тёмного режима. Автоматически формируйте цвета поверхностей тёмного режима, смешивая с тёмной базой:

@media (prefers-color-scheme: dark) {
  --surface: color-mix(in oklch, var(--brand) 15%, #121212);
}

Прозрачность без реальной прозрачности. Смешивание цвета с белым или конкретным цветом фона имитирует прозрачность без компоновки слоёв:

/* Имитирует rgba(59, 130, 246, 0.2) на белом фоне */
color: color-mix(in srgb, #3B82F6 20%, white);

Поддержка браузеров в 2026 году

По состоянию на начало 2026 года oklch() и color-mix() поддерживаются всеми основными современными браузерами. Основная забота — пользователи на старых мобильных браузерах или в корпоративных средах с устаревшими политиками браузеров. Для продакшн-работы, где важна максимальная совместимость, укажите HEX или rgb() в качестве запасного варианта перед современным синтаксисом:

.element {
  /* Запасной вариант для старых браузеров */
  color: #3B82F6;
  /* Прогрессивное улучшение */
  color: oklch(0.62 0.19 250);
}

Выбор правильной функции цвета CSS

Ключевые выводы

• rgb() и hsl() — установленные стандарты с универсальной поддержкой браузеров. Современный синтаксис с пробелами (rgb(R G B / alpha)) делает rgba() и hsla() избыточными.
• hsl() более интуитивен, чем rgb(), для дизайнерской работы, но не является перцептуально равномерным — равные числовые шаги производят неравные перцептуальные изменения, особенно для разных оттенков.
• lab() и lch() внесли перцептуальную равномерность в CSS, но в значительной мере вытеснены более точным oklch().
• oklch() — современный стандарт: перцептуально равномерный, с поддержкой широкой гаммы и отличными характеристиками для градиентов, анимаций и цветовых шкал систем дизайна.
• color-mix() обеспечивает динамическую генерацию цветов прямо в CSS — полезно для тем, оттенков, теней и адаптации тёмного режима.
• Используйте конвертер цветов для перевода любого существующего HEX-кода в oklch() или любой другой формат.
• Предоставляйте запасной HEX или rgb() перед oklch() или color-mix() для максимальной совместимости с браузерами.