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

Сначала пространство, затем пунктуация

Цветовое значение CSS объединяет цветовое пространство, координаты внутри него и иногда альфа-компонент. Видимые символы — лишь способ сериализации. Шестизначный HEX хранит три байта sRGB, а rgb() выражает те же красный, зелёный и синий каналы числами или процентами. HSL и HWB дают альтернативное цилиндрическое либо интуитивное представление sRGB. lab() и oklch() — не переоформленный RGB: браузер преобразует их координаты средствами управления цветом перед композитингом и выводом. Поэтому корректное преобразование должно сохранять и координаты, и исходное пространство.

Именованные цвета и ключевое слово transparent удобны как константы, но плохо подходят как масштабируемая модель редактирования. Например, rebeccapurple вычисляется в определённое значение sRGB, однако имя ничего не сообщает о роли цвета в продукте. В повторно используемой системе значение лучше скрыть за пользовательским свойством с семантическим названием. Тогда формат можно заменить без переименования компонентов, а численно похожие значения не будут ошибочно объявлены одним цветом, если они заданы в разных пространствах или по-разному отображаются.

HEX и rgb() напрямую задают sRGB

HEX использует формы #RRGGBB и #RRGGBBAA; каждая шестнадцатеричная пара лежит в диапазоне от 00 до FF. rgb() задаёт те же каналы sRGB, поддерживает современную запись с пробелами, проценты и косую черту перед alpha. Короткие формы #RGB и #RGBA точны только тогда, когда каждая развёрнутая пара состоит из повторяющейся цифры. Это не механизм округления. Преобразование #4F46E5 в rgb(79 70 229) точное: 4F, 46 и E5 равны 79, 70 и 229. Обратное преобразование округлённых HSL-координат может изменить байт.

.syntax-demo {
  --accent: #4f46e5;
  color: rgb(79 70 229 / 85%);
  border-color: hsl(243.4 75.4% 58.6%);
  outline-color: hwb(243.4 27.5% 10.2%);
}

HSL и HWB удобны для управления sRGB

Функция hsl() использует тон, насыщенность и светлоту HSL, а hwb() — тон, белизну и черноту. Обе записи в итоге описывают цвета sRGB. Угол тона циклический, а для ахроматического результата тон может стать бессильным компонентом. Светлота HSL не измеряет воспринимаемую яркость, поэтому одинаковые числовые шаги не гарантируют одинаковых визуальных шагов. HWB удобен, когда автор мыслит добавлением белого или чёрного к тону, но его охват остаётся sRGB, а итоговый контраст всё равно нужно измерять.

• hsl() и hwb() описывают sRGB, а не расширенный цветовой охват.
• Светлота HSL не равна воспринимаемой светлоте и не заменяет расчёт контраста.
• Бессильный или отсутствующий тон требует осознанной обработки при интерполяции.
• Округление координат может сдвинуть каналы даже при неизменном замысле.

Lab и OKLCH используют другие координаты

lab() использует светлоту CIE и оппонентные оси a и b. lch() представляет близкую модель через светлоту, цветность и тон. oklab() и oklch() основаны на OKLab, где изменения координат во многих задачах выглядят более равномерными. Эти функции способны задать цвет вне sRGB. Браузер может выполнить отображение за пределами охвата под конкретный экран. Исходные координаты сохраняют смысл, но снимок с sRGB-дисплея не доказывает, что каждый пользователь увидел весь цвет широкого охвата одинаково.

Современные разделители и alpha

В современном функциональном синтаксисе каналы разделяют пробелами, а alpha помещают после косой черты. Старый синтаксис с запятыми поддерживается в rgb() и hsl() ради совместимости, но смешивать запятые и пробелы внутри одной функции нельзя. Ключевое слово none обозначает отсутствующий компонент там, где это допускает CSS Color 4; при интерполяции отсутствие не обязано быть равнозначно числовому нулю. Значение процентов также зависит от функции. Следует проверять грамматику выбранной записи, а не переносить единицы и диапазоны между функциями автоматически.

.wide-gamut {
  color: #4f46e5;
}

@supports (color: oklch(0% 0 0)) {
  .wide-gamut { color: oklch(62% 0.2 265); }
}

Выбор записи для поддержки

HEX подходит для точного непрозрачного sRGB из байтового источника и компактного просмотра в коде. rgb() удобно, когда программа работает с каналами sRGB или нужен очевидный alpha. hsl() и hwb() полезны для ограниченных правок в их моделях, если помнить о перцептивных ограничениях. oklch() уместен для работы со светлотой, цветностью и тоном в более равномерных координатах. lab() стоит выбирать при явном требовании этой системы или совместимости. Семантический токен способен скрыть конкретную сериализацию от компонентов.

• Храните название цветового пространства вместе с координатами.
• Используйте стабильное семантическое пользовательское свойство над сырой записью.
• Добавляйте проверенный фолбэк, если он нужен целевым браузерам.
• Измеряйте контраст после композитинга alpha с реальным фоном.

Проверка вычисленного результата

Проверка должна учитывать вычисленный или разрешённый браузером цвет, а не только исходную строку. Фолбэки тестируют в целевых браузерах, значения вне охвата — на репрезентативных экранах, а контраст текста — после окончательного композитинга. Alpha, фон, фильтры, режимы смешивания и color-scheme меняют результат уже после разбора синтаксиса. Автоматические тесты могут подтвердить наличие токена и поддержку функции, но визуальная и доступностная проверка выполняется в реальном контексте. Исходное значение стоит хранить, чтобы цепочка конвертаций не накапливала округление.