Новый формат цвета CSS, о котором вы не знали: OKLCH()

На днях я был в uicolors, пытаясь найти подходящую цветовую схему, которая легла бы в основу темы текущего проекта. Клиент запросил приглушенный зеленый в качестве основного цвета, и поэтому я вывел его, используя инструмент dropper для извлечения шестнадцатеричного кода. Я вставил этот шестнадцатеричный код в цвета пользовательского интерфейса (srsly, этот сайт великолепен) и получил свою палитру. Затем я пошел экспортировать необходимый код для подключения в свой конфигурационный файл tailwind, когда заметил этот отвратительный формат:

ЧТО ЭТО ТАКОЕ???

Излишне говорить, что мне пришлось бросить все, что я делал, и зациклиться на этом новом цветовом формате, о котором я никогда не слышал, и/или подтвердить самому себе, что у меня не было экзистенциального кризиса из-за того, что я не знал о долгом и легендарном существовании OKLCH (спойлер: он стал доступен во всех браузерах в сентябре 2023 и был предложен W3C только в 2021 году).

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

Я имею в виду, что у нас уже есть:

• Шестнадцатеричный #663399
• RGB/a: rgba(102, 51, 153, 1)
  
• HSL/a: hsla(270, 50%, 40%, 1)
  
• HSV: hsv(270, 67%, 60%)
  
• HWB: hwb(270, 20%, 40%)
• Еще многое я забываю (ключевые слова по цвету не в счет)
  

Так ЗАЧЕМ нам нужны еще какие-то цветовые форматы, которые могут нас сбить с толку?? Именно этот вопрос был второй частью моего поиска гиперфиксации, который я надеюсь сжать в понятные термины и сэкономить вам драгоценное время, которое вам, вероятно, понадобится для множества других вещей, например: «О, я не не знаю, проживаю жизнь, провожу время с близкими и т. д. до тошноты.

Давайте углубимся в это:

ПОЧЕМУ oklch() ВООБЩЕ СУЩЕСТВУЕТ?

Прежде чем мы сможем углубиться в то, почему существует oklch(), нам сначала нужно поговорить о его предке, lch():

lch расшифровывается как:

1. Lightness (Легкость)
2. Chroma (Цветность)
   
3. Hue (Оттенок)

Подобно hsl() (что означает оттенок, насыщенность и яркость), lch() позволяет вам настроить три отдельных параметра для определения:

• яркость (l)
• интенсивность/насыщенность (c)
  
• цвет (h)

Однако есть два ключевых отличия, которыми обладает lch() от hsl():

1. Однородное восприятие яркости человеком любого заданного цвета на экране

2. lch() не привязан к какому-либо одному цветовому пространству

Итак, что именно означают эти два предыдущих пункта?

Что касается первого пункта, то, по сути, это то, на что это похоже; когда вы, я или кто-либо другой, кого вы считаете человеком, воспринимает какой-либо цвет на экране, полученном из Интернета, существует вероятность того, что два цвета с одинаковым значением яркости в hsl() будут восприниматься по-разному из-за к их внутреннему значению оттенка (или цвета).

Джош Комо прекрасно передает это в своем блоге о цветовых форматах css. Вы даже можете увидеть разницу между hsl() и lch() и то, как один цвет кажется ярче другого, хотя их значения яркости в hsl() идентичны.

Вот что подразумевается под восприятием; невероятно сложная анатомия, которую наши глаза развивали на протяжении веков, чтобы воспринимать свет с помощью палочек, а цвет - с помощью колбочек, плохо сочетается с математической формулой, найденной в формате hsl().

Дикая штука, верно?

Обратимся ко второму пункту о том, что функция lch() не привязана к какому-либо одному цветовому пространству, в основном все, что это означает, это то, что цвет, который она выдает, будет выглядеть одинаково, независимо от того, на каком типе экрана он отображается.

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

Однако существует и другое цветовое пространство, которое постепенно становится новым стандартом. Это цветовое пространство называется DCI-P3 или просто P3. Своими корнями оно уходит в кинематографические дисплеи для определения цветового стандарта для отображения цифровых фильмов.

Все это говорит о том, что независимо от того, какой тип цветового пространства используется на вашем экране, функция lch() выдаст визуально идентичный цвет, несмотря ни на что.

И вы хотите знать, что еще более умопомрачительно в lch()? Поскольку он не привязан к какому-либо одному цветовому пространству, верхний предел его цветности (или насыщенности) даже неизвестен. В конечном счете это означает гарантированное восприятие цвета практически на любом экране, пока мы не обнаружим ограничение, присущее lch().

Дикий материал, правда?

Итак, теперь, когда мы коснулись основ lch(), зачем нужен этот новый, загадочный цветовой формат, известный как oklch()?

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

Помимо этого, между ними нет большой разницы....

ЕСЛИ ТОЛЬКО ВЫ НЕ ЯВЛЯЕТЕСЬ ПОЛЬЗОВАТЕЛЕМ TAILWIND

Правильно, если вы еще не использовали Tailwind в своих проектах, пожалуйста, позвольте мне привести еще одну вескую причину, почему вам следует рассмотреть это:

ДИНАМИЧЕСКИЕ ЦВЕТОВЫЕ ТЕМЫ

Что такое динамические цветовые темы, спросите вы?

На веб-сайте Evil Martians есть отличный пост, подробно описывающий это, но, в конечном счете, использование oklch() в сочетании с Tailwind позволяет создавать довольно мощные динамические цветовые темы.

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

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

Очевидно, что необходима реализация цветового слайдера и еще кое-какие тонкости, но благодаря Tailwind и oklch() большая часть тяжелой работы будет выполнена за вас. И, чтобы подчеркнуть это еще раз, ознакомьтесь со статьей Evil Martians, если вы действительно хотите это реализовать.

И чтобы сделать это еще более реальным, существует средство выбора цвета oklch(), позволяющее точно определить значения, необходимые для создания целой палитры.

И это практически все, что я могу сказать по этому поводу.

Если вам интересно подробнее ознакомиться с этими двумя цветовыми форматами, вы можете заглянуть на страницу Википедии CIELAB, которая является организацией, разработавшей lch() в 1976 году (??), или ознакомиться с Бьерном Оттоссоном, который разработал новый формат oklch() в 2020 году. Его предложение можно найти в недавно обновленном модуле CSS Color 4.

Спасибо, что, как всегда, были со мной во время моих гиперфиксаций и кризисов!