Демистификация относительного синтаксиса цвета в CSS: цветовые пространства HSL и Lab для глобального веб-дизайна

Мир веб-дизайна постоянно развивается, а вместе с ним и инструменты и техники, которые мы используем для создания визуально привлекательного и доступного пользовательского опыта. Одним из самых захватывающих недавних дополнений в CSS является относительный синтаксис цвета (Relative Color Syntax). Эта мощная функция позволяет манипулировать цветами непосредственно в CSS, создавая динамические темы, тонкие вариации и доступные дизайны с большей легкостью и гибкостью. В этой статье мы углубимся в тонкости относительного синтаксиса цвета, уделяя особое внимание цветовым пространствам HSL и Lab, и тому, как вы можете использовать их в своих проектах по всему миру.

Что такое относительный синтаксис цвета в CSS?

До появления относительного синтаксиса цвета манипулирование цветами в CSS часто требовало использования препроцессоров, таких как Sass или Less, или применения JavaScript. Относительный синтаксис цвета меняет это, позволяя изменять существующие цвета непосредственно в правилах CSS. Это достигается путем обращения к отдельным компонентам цвета (например, тон, насыщенность и светлота в HSL) и применения к ним математических операций. Это означает, что вы можете осветлять, затемнять, насыщать, обесцвечивать или изменять тон цвета на основе его текущего значения, и все это без необходимости предварительно определять множество цветовых вариаций.

Синтаксис построен вокруг функции color(), которая позволяет указать цветовое пространство (например, hsl, lab, lch, rgb или oklab), базовый цвет для изменения и желаемые корректировки. Например:

.element {
 color: color(hsl red calc(h + 30) s l);
}

Этот фрагмент кода берет красный цвет, использует цветовое пространство hsl и увеличивает тон на 30 градусов. h, s и l представляют существующие значения тона, насыщенности и светлоты соответственно. Функция calc() имеет решающее значение для выполнения математических операций.

Почему именно HSL и Lab?

Хотя относительный синтаксис цвета работает с различными цветовыми пространствами, HSL и Lab предлагают особые преимущества для манипуляции цветом и доступности. Давайте разберемся, почему:

HSL (Тон, Насыщенность, Светлота)

HSL — это цилиндрическое цветовое пространство, которое интуитивно представляет цвета на основе человеческого восприятия. Оно определяется тремя компонентами:

Тон (Hue): Позиция цвета на цветовом круге (0-360 градусов). Красный обычно находится на 0, зеленый — на 120, а синий — на 240.
Насыщенность (Saturation): Интенсивность или чистота цвета (0-100%). 0% — это оттенки серого, а 100% — полностью насыщенный цвет.
Светлота (Lightness): Воспринимаемая яркость цвета (0-100%). 0% — это черный, а 100% — белый.

Преимущества HSL:

Интуитивно понятное управление: HSL позволяет легко настраивать цвета на основе качеств восприятия. Увеличение светлоты делает цвет ярче, уменьшение насыщенности — более тусклым, а изменение тона сдвигает цвет по цветовому кругу.
Создание цветовых схем: HSL упрощает процесс создания гармоничных цветовых схем. Вы можете легко генерировать комплементарные цвета (тон + 180 градусов), аналоговые цвета (близкие по тону) или триадные цвета (тоны, отстоящие на 120 градусов друг от друга).
Динамическая темизация: HSL идеально подходит для динамической темизации. Вы можете определить базовый цвет, а затем использовать относительный синтаксис цвета для генерации различных вариаций для светлой и темной тем.

Пример: Создание темной темы (Dark Mode)

Допустим, ваш фирменный цвет — #007bff (яркий синий). Вы можете использовать HSL для создания темной темы, которая сохраняет суть бренда, но при этом более комфортна для глаз в условиях низкой освещенности.

:root {
 --brand-color: #007bff;
 --brand-color-hsl: color(oklch #007bff h s l);
 --bg-color: #fff;
 --text-color: #000;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #121212; /* Темно-серый */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* Слегка обесцвеченный и осветленный фирменный цвет */
 }
}

body {
 background-color: var(--bg-color);
 color: var(--text-color);
}

.brand-button {
 background-color: var(--brand-color);
 color: #fff;
}

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

Lab (Светлота, a, b)

Lab (или CIELAB) — это цветовое пространство, разработанное так, чтобы быть перцепционно равномерным. Это означает, что изменение значений цвета соответствует аналогичному изменению в воспринимаемой разнице цветов, независимо от исходного цвета. Оно определяется тремя компонентами:

L: Светлота (0-100%). 0 — это черный, 100 — белый.
a: Позиция на оси зеленый-красный. Отрицательные значения соответствуют зеленому, положительные — красному.
b: Позиция на оси синий-желтый. Отрицательные значения соответствуют синему, положительные — желтому.

Преимущества Lab:

Перцепционная равномерность: Перцепционная равномерность Lab делает его идеальным для задач, где важны точные различия в цвете, например, для цветокоррекции и проверки доступности.
Широкий цветовой охват: Lab может представлять более широкий диапазон цветов, чем RGB или HSL.
Доступность: Lab часто используется в расчетах доступности для обеспечения достаточного цветового контраста между текстом и фоном. WCAG (Web Content Accessibility Guidelines) использует формулу, основанную на относительной яркости, которая тесно связана с цветовым пространством Lab.

Пример: Улучшение цветового контраста для доступности

Обеспечение достаточного цветового контраста жизненно важно для доступности. Допустим, у вас есть цвет текста и цвет фона, которые не соответствуют требованию WCAG AA по контрастности (4.5:1). Вы можете использовать Lab, чтобы скорректировать светлоту цвета текста до тех пор, пока он не будет соответствовать требованию.

Примечание: Хотя прямое управление коэффициентом контрастности невозможно непосредственно в CSS с помощью относительного синтаксиса цвета, мы можем использовать его для настройки светлоты, а затем использовать инструмент проверки контрастности для верификации результата.

.text {
 color: var(--text-color);
 background-color: var(--bg-color);
}

:root {
 --text-color: #333;
 --bg-color: #eee;
}

/*Пример: Это не вычисляет коэффициент контрастности напрямую.*/
/*Это концептуальный пример настройки светлоты*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* Осветляем текст на 10 единиц. Это будет иметь эффект только до определенного момента, если значение L цвета текста близко к 100. для затемнения нужно вычитать*/

}

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

Oklab: Улучшенная версия Lab

Oklab — это относительно новое цветовое пространство, разработанное для устранения некоторых недостатков Lab. Оно нацелено на еще лучшую перцепционную равномерность, что облегчает прогнозирование того, как изменения значений цвета повлияют на воспринимаемый цвет. Во многих случаях Oklab предлагает более плавный и естественный способ настройки цветов по сравнению с Lab, особенно при работе с насыщенностью и светлотой.

Использование Oklab с относительным синтаксисом цвета аналогично использованию Lab. Вы просто указываете oklab в качестве цветового пространства:

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*Осветлить цвет на 10%*/
}

Практические примеры и сценарии использования

Относительный синтаксис цвета с HSL и Lab открывает широкий спектр возможностей для веб-дизайна. Вот несколько практических примеров:

Генерация цветовых палитр: Создайте базовый цвет, а затем сгенерируйте палитру комплементарных, аналоговых или триадных цветов с помощью HSL.
Выделение элементов: Осветлите или затемните цвет фона элемента при наведении курсора или фокусе для обеспечения визуальной обратной связи.
Создание тонких вариаций: Добавьте небольшое изменение в тоне или насыщенности для создания глубины и визуального интереса.
Динамическая темизация: Реализуйте светлые и темные режимы или позвольте пользователям настраивать цветовую схему вашего сайта.
Улучшение доступности: Настройте цвета для обеспечения достаточного контраста для пользователей с нарушениями зрения.

Пример: Генерация цветовой палитры с помощью HSL

:root {
 --base-color: #29abe2; /* Светло-голубой */
 --complementary-color: color(hsl var(--base-color) calc(h + 180) s l);
 --analogous-color-1: color(hsl var(--base-color) calc(h + 30) s l);
 --analogous-color-2: color(hsl var(--base-color) calc(h - 30) s l);
 --triadic-color-1: color(hsl var(--base-color) calc(h + 120) s l);
 --triadic-color-2: color(hsl var(--base-color) calc(h - 120) s l);
}

.base {
 background-color: var(--base-color);
}

.complementary {
 background-color: var(--complementary-color);
}

.analogous-1 {
 background-color: var(--analogous-color-1);
}

.analogous-2 {
 background-color: var(--analogous-color-2);
}

.triadic-1 {
 background-color: var(--triadic-color-1);
}

.triadic-2 {
 background-color: var(--triadic-color-2);
}

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

Пример: Создание эффекта при наведении с помощью Lab

.button {
 background-color: #4caf50; /* Зеленый цвет */
 color: #fff;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.button:hover {
 background-color: color(lab #4caf50 l calc(a * 1.1) calc(b * 1.1)); /* Немного осветляем и увеличиваем a и b */
}

Здесь мы используем Lab, чтобы немного осветлить и сдвинуть цвет в сторону красного и желтого при наведении курсора, создавая тонкую, но заметную визуальную обратную связь для пользователя.

Совместимость с браузерами и фолбэки

Как и в случае с любой новой функцией CSS, совместимость с браузерами является важным фактором. Относительный синтаксис цвета поддерживается в большинстве современных браузеров, включая Chrome, Firefox, Safari и Edge. Однако старые браузеры могут его не поддерживать.

Чтобы ваш сайт работал во всех браузерах, важно предусмотреть фолбэки (резервные варианты) для браузеров, которые не поддерживают относительный синтаксис цвета. Вы можете сделать это, используя переменные CSS и правило @supports.

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* Резервный цвет */
}

@supports (color: color(hsl var(--base-color) h calc(s * 1.2) l)) {
 :root {
 --highlight-color: color(hsl var(--base-color) h calc(s * 1.2) l); /* Использовать относительный синтаксис цвета, если поддерживается */
 }
}

.highlight {
 background-color: var(--highlight-color);
}

В этом примере мы определяем резервный цвет (#33b5e5), а затем используем правило @supports, чтобы проверить, поддерживает ли браузер относительный синтаксис цвета. Если да, мы обновляем переменную --highlight-color цветом, сгенерированным с помощью относительного синтаксиса цвета. Это гарантирует, что пользователи на старых браузерах все равно увидят выделенный элемент, даже если его цвет будет не совсем таким же, как на новых браузерах.

Вопросы доступности

Хотя относительный синтаксис цвета может быть мощным инструментом для создания визуально привлекательных дизайнов, крайне важно учитывать доступность. Убедитесь, что создаваемые вами цветовые комбинации обеспечивают достаточный контраст для пользователей с нарушениями зрения. Используйте такие инструменты, как WebAIM Contrast Checker, чтобы проверить, соответствуют ли ваши цветовые комбинации требованиям WCAG AA или AAA по контрастности.

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

Заключение

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

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

Для дальнейшего изучения

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