Цветовое пространство будущего и его применение в интерфейсах

Всем привет, меня зовут Макс, я продуктовый дизайнер в Paykassma, и сегодня я расскажу про цветовое пространства OKLAB, которое устраняет множество проблем в sRGB и позволяет использовать расширенную цветовую гамму для экранов с поддержкой DCI-P3.

Перед тем, как мы начнем, давайте вспомним основные определения и их значения, которыми мы будем пользоваться далее.

Цветовая гамма — это полный спектр цветов, видимый человеческим глазом. Учитывая технологические ограничения, устройства используют ограниченную гамму цвета, которую принято представлять в виде горизонтальной прямой, на которой находятся цвета. Например, есть стандарт sRGB, Adobe RGB, DCI-P3 и т.д, каждый из которых определяет свой диапазон цветовой гаммы.

Итак, гаммы — это диапазоны, а диапазоны нуждаются в способах определения верхней и нижней границ этих осей. Вот тут-то мы и начинаем говорить о цветовых пространствах. Цветовое пространство — это то, что определяет способ построения точек гаммы. sRGB — это цветовая гамма, которая охватывает диапазон цветов, а HEX, RGB и HSL - это пространства, которыми мы пользуемся для работы с цветовой гаммой.

Упрощая мы можем сказать, что HEX, RGB, HSL это лишь инструменты для работы с одной и той же цветовой гаммой. Конечно, у каждого инструмента есть плюсы и минусы. А учитывая, что эти инструменты появились очень давно, то пора бы научиться пользоваться новыми, ну или хотя бы знать о них. Так что давайте для начала разберемся что не так с текущими и пойдем дальше.

В HSL светлота и насыщенность варьируются от 0% до 100%, где 0% означает отсутствие, а 100% — максимальное количество светлых или насыщенных цветов. Проблема в том, что это не совсем соответствует тому, как наши глаза воспринимают свет. Посмотрите на эти два цвета HSL, каждый из которых имеет одинаковое значение светлоты HSL, равное 50%:

Эффект Абни возникает когда оттенок монохроматического света меняется при добавлении белого света, то есть при изменении прозрачности в sRBG.

При добавлении белого к красному цвету он слегка смещается в сторону розового; зеленый смещается в сторону голубого, а синий — в сторону фиолетового:

Если у вас есть градиент между двумя цветами, где линия между ними в цветовом пространстве проходит через середину нулевой насыщенности, вы получите «серую мертвую зону» в середине:

Человеческий глаз способен различить гораздо больше цветов, чем многие электронные устройства. Современные мониторы в основном показывают небольшой набор цветов, который называется sRGB. Но уже сейчас все современные устройства Apple и многие OLED-экраны поддерживают на 30% больше цветов, чем есть в sRGB.

Этот расширенный набор цветов называется DCI-P3. Он также известен, как широкий цветовой охват (wide-gamut colors).

Новые цвета зачастую заметно насыщеннее старых. Это помогает создавать более привлекательные и красочные интерфейсы. При том, что все текущие инструменты такие как HEX, RGB, HSL не могут их отображать.

Когда свет попадает в глаз и попадает на сетчатку, он обрабатывается многими слоями нейронов и создает психическое впечатление. Маловероятно, чтобы этот процесс был простым и линейным, да это и не так.

Люди создавали цветовые колеса и подобные визуализации на протяжении сотен лет. В 20 веке было проведено множество исследований и моделирования цветового зрения. Например, модель CIE XYZ основана на том, насколько чувствительны наши фоторецепторные клетки к различным частотам света. CIE XYZ до сих пор является основополагающим цветовым пространством, на котором базируются все остальные цветовые пространства, например sRGB, которое представляет собой более узкое цветовое пространство. То есть, CIA XYZ является фундаментальной моделью, а sRGB прикладной.

Между инструментами, которые мы обычно используем - такими как sRGB и HSL, — и результатами более старых исследования существует разрыв. Это имеет смысл, потому что, когда HSL был разработан в 1970-х годах, у нас не было больших вычислительных мощностей, поэтому он представляет собой довольно простой перевод RGB. Однако с тех пор мало что изменилось.

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

Ну а теперь давайте посмотрим какие есть альтернативы привычным нам цветовым пространствам.

CIE LAB — это относительно простое математическое преобразование CIE XYZ. В этом цветовом перцептивном пространстве числовые различия между значениями представляют собой степень изменения цвета, которую может воспринять человек.

Основной дизайн и принцип работы CIE LAB основаны на научной теории, которая показывает, что мозг интерпретирует цветовые сигналы сетчатки как различия между светлым и темным (светлота) и между взаимоисключающими зонами противоположных цветов: красный/зеленый и синий/желтый.

Модель LCH — это цилиндрическое преобразование цветового пространства LAB. Свойствами являются Lightness, Chroma и Hue.

Lightness — степень светлоты цвета или его относительная близость к белому или черному. Изменение этого свойства приводит к появлению оттенка или тона.

Chroma — красочность цвета, не зависящая от его светлоты. Изменение этого свойства приводит к изменению тона.

Chroma — цветность означает чистоту цвета. К оттенку с высоким уровнем цветности не добавляется ни черный, ни белый, ни серый. И наоборот, добавление белого, черного или серого снижает его цветность. Это похоже на насыщенность, но не совсем то же самое. Цветность можно представить как яркость цвета по сравнению с белым.

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

Hue — оттенок цвета, который измеряется в градусах и определяет конкретные значения цвета.

Однако CIE LAB не совсем однороден с точки зрения восприятия. Хуже того, чем больше экспериментов проводили люди, тем яснее становилось, что никакое трехмерное пространство никогда не может быть перцептивно однородным; три измерения просто не могут передать все странные и удивительные способы, которыми наши глаза и мозг обрабатывают цвета.

При значениях Hue в LCH около 300 градусов (это основной синий цвет sRGB) мы видим очевидную проблему - цвет заметно меняет оттенок на пурпурный. Также эффект присутствует в диапазоне цветов в 60 градусов.

Недавно Björn Ottosson представил OKLAB, улучшенное пространство, похожее на CIA LAB.

Как и в CIE LAB, существует центральная ось светлоты L, которая обычно записывается как число без единиц измерения в диапазоне [0,1]; для совместимости с остальной частью CSS она может быть записана в процентах. 100% означает значение L, равное 1.0. L=0% или 0.0 — это глубокий черный цвет (полное отсутствие света), а L=100% или 1.0 — рассеянный белый.

Как и в CIE LAB, оси a и b передают оттенок; положительные значения по оси a - это пурпурно-красный цвет, а отрицательные значения — дополнительный цвет, зеленый. Аналогично, положительные значения по оси b — желтый, а отрицательные — дополнительный синий/фиолетовый.

Белая точка D65, та же точка белого, что и в большинстве цветовых пространств RGB.

Цветовая модель OKLCH является улучшенной версией LCH (Lightness, Chroma, Hue — светлота, цветность, оттенок), которая разработана для более точного и единообразного представления цвета, основанного на восприятии человеческого глаза, и обладает рядом преимуществ по сравнению с другими цветовыми моделями:

Однако у OKLCH есть особенность, при изменении Hue с заданными настройками светлоты, мы можем не получить никакого света, также когда у нас нет поддержки P3.

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

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

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

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