🎨
← Назад к руководствам

Современные CSS-функции цвета: rgba(), hsl(), oklch() и не только

· Теги: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Современные CSS-функции цвета: rgba(), hsl(), oklch() и не только

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

Это руководство охватывает каждую основную CSS-функцию цвета, доступную в 2026 году, от знакомых до передовых.

RGB и RGBA: рабочие лошадки

Функция rgb() определяет цвета с использованием аддитивной цветовой модели красный-зелёный-синий. Она является частью CSS с версии CSS1 и поддерживается во всех браузерах, когда-либо созданных.

/* Устаревший синтаксис с запятыми */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Современный синтаксис с пробелами (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Процентные значения */
color: rgb(100% 0% 0%);

Ключевые изменения в современном RGB

CSS Color Level 4 ввёл два важных улучшения:

  1. Разделение пробелами вместо запятых — Функция rgb() теперь принимает значения, разделённые пробелами или слешами
  2. Унифицированный синтаксис альфа-канала — Псевдоним rgba() устарел (но всё ещё поддерживается). rgb() теперь изначально принимает альфа-канал

Этот современный синтаксис поддерживается во всех браузерах, выпущенных с 2020 года. Для новых проектов используйте современный синтаксис и полностью откажитесь от псевдонима rgba().

Каналы RGB

Каждый канал RGB принимает:

  • Целое число от 0 до 255
  • Процент от 0% до 100%
  • Ключевое слово none для отсутствующих каналов (CSS Color Level 4)

Ключевое слово none полезно при интерполяции цветов — оно сообщает браузеру не интерполировать данный конкретный канал.

HSL и HSLA: интуитивное управление цветом

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

/* H — угол оттенка (0-360), S — насыщенность (0-100%), L — светлота (0-100%) */
color: hsl(0 100% 50%);        /* Чистый красный */
color: hsl(0 100% 50% / 0.5);  /* Красный с 50% непрозрачностью */

/* Углы оттенка с единицами измерения */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Справочник углов оттенка

| Оттенок | Цвет | HEX | |-----|---------|----------| | 0 | Красный | #FF0000 | | 30 | Оранжевый | #FF8000 | | 60 | Жёлтый | #FFFF00 | | 120 | Зелёный | #00FF00 | | 180 | Голубой | #00FFFF | | 240 | Синий | #0000FF | | 300 | Пурпурный | #FF00FF |

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

HWB: смешивание с белым и чёрным

HWB (Оттенок, Белизна, Чернота) — более интуитивная альтернатива HSL. Вы выбираете оттенок, затем добавляете белизну и черноту для создания оттенков и теней.

color: hwb(0 0% 0%);    /* Чистый красный */
color: hwb(0 40% 0%);   /* Осветлённый красный (добавлен белый) */
color: hwb(0 0% 40%);   /* Затемнённый красный (добавлен чёрный) */
color: hwb(0 20% 20%);  /* Тон (белый + чёрный) */

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

Поддержка браузерами: HWB поддерживается во всех современных браузерах (Chrome 101+, Firefox 96+, Safari 15+).

LAB и LCH: перцептивно равномерные пространства

LAB (Светлота, ось A, ось B) и LCH (Светлота, Цветность, Оттенок) — перцептивно равномерные цветовые пространства. Это означает, что евклидово расстояние между двумя значениями цвета соответствует воспринимаемой визуальной разнице — то, что RGB и HSL не могут сделать.

color: lab(50% 50 0);        /* Средний красный */
color: lch(50% 50 0);        /* Тот же цвет в цилиндрической форме */

Почему перцептивная равномерность важна:

  • Градиенты — Интерполяция в LAB или LCH создаёт плавные, естественные переходы без тусклой «грязной зоны», которую создают RGB-градиенты
  • Измерение разницы цветов — Delta E (мера перцептивной разницы) имеет смысл в пространстве LAB
  • Доступность — Перцептивная равномерность помогает предсказать, как цвета будут восприниматься пользователями с нарушениями цветового зрения

Ограничения: LAB и LCH могут создавать цвета за пределами гаммы sRGB. Эти цвета будут обрезаны при отображении на экранах sRGB, но доступны на дисплеях с более широкой гаммой (DCI-P3, Rec. 2020).

Поддержка браузерами: Поддерживается в Chrome 111+, Firefox 113+, Safari 15+. Нет поддержки IE или устаревшего Edge.

OKLAB и OKLCH: современный перцептивный стандарт

OKLCH — это улучшенная версия LCH, разработанная Бьорном Оттоссоном. Она исправляет перцептивные неравномерности в LCH, особенно для синих оттенков. OKLCH стал рекомендуемым цветовым пространством по умолчанию для новых CSS-проектов в 2025-2026 годах.

color: oklch(60% 0.2 30);
/* Светлота: 0-100%, Цветность: 0-~0.4, Оттенок: 0-360 */

Почему OKLCH — лучшее цветовое пространство для CSS

  1. Лучшая перцептивная равномерность — Равные числовые изменения производят равные визуальные изменения для всех оттенков
  2. Предсказуемая светлота — Цвета с одинаковым значением светлоты действительно выглядят одинаково яркими
  3. Без грязных градиентов — Интерполяция остаётся чистой по всему диапазону оттенков
  4. Безопасен для sRGB по умолчанию — Большинство значений OKLCH дают внутригаммовые цвета sRGB
  5. Интуитивные каналы — Как HSL, но с реальной перцептивной точностью

OKLCH на практике

/* Создание сбалансированной цветовой шкалы с OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Обратите внимание, что каждая ступень изменяется примерно на одинаковое значение светлоты (20 процентных пунктов). Поскольку OKLCH перцептивно равномерен, эти ступени выглядят равномерно распределёнными для человеческого глаза — то, что трудно достичь с HSL.

Поддержка браузерами: OKLCH поддерживается в Chrome 111+, Firefox 113+, Safari 15.4+. Он быстро стал наиболее рекомендуемым современным цветовым пространством.

Color-Mix: смешивание цветов в CSS

Функция color-mix() смешивает два цвета в указанном цветовом пространстве:

/* Смешивание красного и синего поровну в sRGB */
color: color-mix(in srgb, red, blue);

/* 30% основного, 70% белого — осветление */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Смешивание в перцептивном цветовом пространстве для плавных результатов */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

Параметр in <color-space> позволяет управлять пространством интерполяции. В большинстве случаев in oklch даёт наилучшие визуальные результаты.

Сценарии использования:

  • Создание оттенков и теней без функций препроцессора
  • Построение вариантов компонентов из одного цветового токена
  • Динамическая генерация состояний наведения и активных состояний
  • Создание эффектов, подобных градиентам, в одной функции

Относительный синтаксис цвета: изменение существующих цветов

CSS Color Level 4 позволяет создавать новые цвета из существующих путём изменения отдельных каналов:

--primary: #3366cc;

/* Использование каналов OKLCH */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* Использование каналов HSL */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

Ключевое слово from <color> распаковывает каналы исходного цвета в каналы целевой функции, которые затем можно настроить с помощью арифметики.

Ключевые слова каналов для каждого цветового пространства

Каждое цветовое пространство предоставляет специфические ключевые слова каналов:

| Цветовое пространство | Ключевые слова | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Обзор поддержки браузерами (2026)

| Функция | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | Все | Все | Все | Все | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Относительный синтаксис цвета | 111+ | 113+ | 16.2+ | 111+ |

Все современные цветовые функции безопасны для использования в 2026 году для проектов, не требующих поддержки Internet Explorer. Для более широкой совместимости используйте этап сборки, который преобразует современный синтаксис в HEX или устаревший rgb().

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

  • Для существующих проектов — HSL остаётся лучшим балансом читаемости и возможностей
  • Для новых проектов — Используйте OKLCH в качестве основного цветового пространства за его перцептивную точность
  • Для градиентов — Всегда интерполируйте в OKLCH, чтобы избежать грязных переходов
  • Для дизайн-систем — Храните базовые цвета в OKLCH, генерируйте варианты с помощью color-mix() или относительного синтаксиса
  • Для canvas/WebGL — Придерживайтесь RGB, который является нативным для конвейера рендеринга

Заключение

Современные CSS-функции цвета преобразили то, что можно делать с цветом в вебе. OKLCH обеспечивает перцептивную равномерность, которая делает дизайн цветовых систем предсказуемым. color-mix() и относительный синтаксис цвета устраняют необходимость в функциях цвета препроцессора. Вместе эти инструменты дают веб-разработчикам те же возможности работы с цветом, которые инструменты дизайна предлагали годами — теперь непосредственно в браузере.

Используйте наш бесплатный онлайн-конвертер цветов, чтобы конвертировать между всеми современными CSS-форматами цвета, включая OKLCH, LAB, HWB и классические HEX/RGB/HSL.