Прагматичное руководство по современным цветам в CSS

Современный CSS предлагает множество улучшений в работе с цветами, делая их более гибкими и простыми в использовании даже для разработчиков, которые в основном копируют значения. Теперь альфа-канал можно указывать непосредственно в rgb() и hsl() без необходимости использования rgba() или hsla(): color: rgb(255, 0, 0, 0.5);. Кроме того, устаревший синтаксис с запятыми сменился новым, использующим пробелы, где для указания прозрачности применяется слэш: color: rgb(255 0 0 / 0.5);. В hsl() единицы измерения (например, deg или %) в новом синтаксисе стали опциональными.

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

:root {
  --color-primary: #2563eb;
}
.semi-transparent-primary-background {
  background-color: hsl(from var(--color-primary) h s l / 0.75);
}

Эта функция крайне удобна для таких компонентов, как уведомления, требующие вариаций одного базового цвета.

Для темной и светлой тем в CSS появилась функция light-dark(), позволяющая определить оба значения цвета в одной декларации: color: light-dark(#000, #fff);. В сочетании со свойством color-scheme, это упрощает адаптацию к предпочтениям пользователя и управление темами, а также позволяет фиксировать цветовую схему для отдельных компонентов.

CSS теперь позволяет контролировать цветовое пространство для интерполяции в градиентах, устраняя проблему "выцветших" переходов по умолчанию (sRGB) с помощью in oklch или lch:

.better {
  background: linear-gradient(in oklch 90deg, var(--color-1), var(--color-2));
}

Также можно создавать "радужные" градиенты между двумя одинаковыми цветами с ключевым словом longer hue. Современный CSS поддерживает более широкие цветовые гаммы, чем sRGB, что позволяет точно воспроизводить специфические, яркие цвета с помощью функции color(). Эти новшества значительно расширяют возможности разработчиков по работе с цветом в вебе.

Оригинал статьи: A Pragmatic Guide to Modern CSS Colours