Откройте для себя яркие цвета с OKLCH

Введение

Веб-дизайн значительно эволюционировал за эти годы, как и то, как мы работаем с цветом. Хотя RGB и шестнадцатеричные коды (Hex) были стандартом на протяжении десятилетий, появился новый претендент для устранения их ограничений: цветовая модель OKLCH.

Что такое OKLCH?

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

Название OKLCH расшифровывается как:

• L - Светлота (Lightness)
• C - Хрома (Chroma)
• H - Оттенок (Hue)

Компоненты OKLCH

Светлота (L)

Светлота управляет тем, насколько светлым или темным является цвет.

• 0% — абсолютный черный.
• 100% — абсолютный белый.

В отличие от HSL, где 50% светлоты могут выглядеть совершенно по-разному в зависимости от оттенка (например, желтый против синего), светлота OKLCH постоянна. Значение светлоты 60% будет выглядеть одинаково ярким для всех оттенков.

Хрома (C)

Хрома представляет собой интенсивность или чистоту цвета (аналогично насыщенности).

• 0 — полностью серый.
• 0.4 (примерно) — максимум для большинства цветов sRGB.
• Значения могут быть выше (например, 0.5 или более) для дисплеев с широким цветовым охватом (P3, Rec.2020).

Оттенок (H)

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

• 0 - 360 градусов.
• 0 — примерно красный, 120 — зеленый, 240 — синий.

Зачем использовать OKLCH?

1. Перцептивная равномерность

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

2. Доступ к цветам широкого охвата

SRGB (используемый Hex и RGB) может отображать только ограниченный диапазон цветов. Современные мониторы поддерживают P3 и Rec.2020, которые могут отображать гораздо более яркие зеленые и голубые оттенки. OKLCH позволяет вам получить доступ к этим «супер-насыщенным» цветам, которые ранее невозможно было задать в CSS.

3. Предсказуемое смешивание цветов

Благодаря своей перцептивной равномерности создание градиентов и смешивание цветов в OKLCH дает плавные, естественные переходы без «серых мертвых зон», часто встречающихся в градиентах RGB.

Использование OKLCH в CSS

Поддержка OKLCH теперь доступна во всех основных современных браузерах.

.my-element {
  /* Яркий розовый */
  background-color: oklch(60% 0.25 330);
}

.semi-transparent {
  /* С альфа-прозрачностью */
  color: oklch(80% 0.1 120 / 0.5);
}

Заключение

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