Разбираемся с цветами: пространства, иллюзии и квантование
Привет! Меня зовут Илья, я iOS-разработчик в компании Банки.ру.
Однажды я заметил, что цвет из Figma на симуляторе почему-то выглядел иначе. Вроде бы HEX-код один и тот же, но они явно отличались. Это заставило меня задуматься о том, что происходит с цветами при передаче изображения из одного приложения в другое. Чтобы разобраться, я решил погрузиться в вопрос и изучить природу цвета. Из этого исследования и появилась данная статья.
Надеюсь, она поможет вам понять основы работы с цветом, разобраться в причинах несоответствия и, возможно, даже взглянуть на цвета с новой точки зрения.
В статье разберем следующие темы:
Что такое цвет и WOW-эффекты с ним
Дискретизация и квантование
Цветовые модели
Цветовое пространство
HEX-квиз и выводы
Что такое цвет
Люди давно пытались разгадать загадку цвета: почему мы видим разные предметы и явления именно так? Почему при разном освещении цвет меняется?
В XVII веке сэр Исаак Ньютон взял трехгранную призму и разложил солнечный свет на цветовой спектр, что стало революцией в понимании природы света.Сегодня уже каждому школьнику (или почти каждому) известно, что цвета обусловлены различной длиной световой волны. Световые волны сами по себе цвета не имеют — цвет возникает лишь при восприятии человеческим глазом волн в диапазоне примерно от 400 до 700 нанометров и обработки этих сигналов мозгом.
Глаз распознает волны этого диапазона с помощью особых рецепторов — колбочек, чувствительных к длинам волн, отвечающих за передачу световой энергии и ее трансформацию в нервный импульс. Каждая колбочка реагирует на свет с разной интенсивностью. Именно это различие в их активности позволяет нам воспринимать цвета. Общий механизм понятен, но точные процессы, благодаря которым формируется субъективное ощущение цвета, до сих пор остаются до конца не изученными.
Например, на восприятие цвета влияют психологические факторы: настроение, нервная система и так далее.
Например, в 2010 году группа ученых под руководством доктора Людгера Тебарца-Ван-Елста из Фрайбургского университета в Германии провела исследование, которое показало, что люди в депрессии воспринимают цвета более приглушенными. Выяснилось, что в депрессии у человека заметно снижен отклик на изменение цвета изображений с черного на белый и обратно по сравнению со здоровыми людьми.
Цвет, кстати, способен нас обманывать, создавая иллюзии.
WOW-эффекты
Вы точно знаете самую известную иллюзию — та самая фотография платья. Для одних оно сине-черное, другие заявляют, что платье бело-золотое.
Проведем собственный эксперимент: посмотрим на это фото. Оно выглядит странно, но в чем именно странность вы вряд ли догадаетесь.
На самом деле, на изображении с клубникой нет ни одного красного пикселя, однако ягоды всё равно кажутся красными. Этот эффект возникает благодаря нашему предыдущему опыту. Наш мозг «закрашивает» ягоды в красный цвет, опираясь на знание о том, что клубника обычно красная.
Для убедительности приложу скриншот с колориметром:
Подробнее про цветовые иллюзии можно почитать тутВ статье на Medium .
Откуда берутся такие иллюзии? Давайте разберемся.
Дискретизация и квантование
Цвет можно рассматривать в качестве непрерывного аналогового сигнала. Как программисты, мы стремимся закодировать его, применяя стандартный подход, схожий с работой со звуком, который включает два этапа оцифровки:
Дискретизация — разбиение непрерывного сигнала на выборки.
Квантование — преобразование каждой выборки в определённое значение.
В фототехнике за это отвечает матрица фотосенсоров.
Она разбивает изображение на сетку (например, 100 на 100), и каждый элемент сетки фиксирует интенсивность света, попавшего на фотосенсор — это и есть дискретизация. А при квантовании фотосенсор сопоставляет каждой выборке численное значение, превращая интенсивность света в число.
Например, если мы допустим, что квантуем два уровня до двух цветов палитры (черного и белого), то все просто. Но если у нас N уровней, а мы квантуем до M-цветовой палитры, где N > M, возникает ошибка квантования. Простой способ её исправить — округлять значения к ближайшему цвету в доступной палитре.
Как, собственно, происходит процесс квантования? Рассмотрим самый простой метод оцифровки — Fixed Thresholding, что можно перевести как «фиксированный порог». Этот подход предполагает наличие определённого порогового значения. Например, при квантовании 256 уровней значения выше 128 становятся белыми, а те, что ниже 128 — чёрными.
threshold = 128
Однако, если взять другое изображение с более чем 256 оттенками серого и применить Fixed Thresholding, этот метод окажется малоэффективным — результат будет недостаточно качественным.
Например, возьмём фото с мостом:
Для того чтобы успешно преобразовать изображение с широким диапазоном оттенков в ограниченную палитру, существует целое направление — дизеринг. Дизеринг добавляет определённый вид шума, чтобы распределить и смягчить ошибку квантования случайным образом.
Вот примеры: дизеринг с добавлением случайного шума, дизеринг Байера и дизеринг с рассеиванием ошибки. Этих алгоритмов существует много, и каждый из них даёт уникальные визуальные эффекты.
Можно получать очень интересные результаты. Вы можете сами загрузить интересующее изображение и поиграть с параметрами, например, с помощью этого telegram-бота — @ZXRasterBot.
Итак, мы немного коснулись темы оцифровки, дискретизации и квантования. Вы наверняка слышали про RGB, CMYK и прочие цветовые модели, давайте подробнее рассмотрим, что это такое и для чего они нужны.
Цветовые модели
Цвет имеет трёхмерную природу — это означает, что для его точного определения достаточно трех параметров.
На изображении слева — классическая модель RGB, которая еще носит название аддитивной, где производные цвета получаются путём добавления к чёрному цвету различных пропорций основных цветов модели. Она используется, когда устройство является активным источником излучения. Например, если у нас чёрный экран, и на нём рядом загораются красный, зелёный и синий пиксели — в результате мы видим белый цвет. Различные комбинации и интенсивности этих трёх цветов позволяют создавать цветовой спектр.
Для печати же применяется другая модель — CMYK, которая также называется «субтрактивной». В отличие от RGB, где цвета добавляются к чёрному, в CMYK мы начинаем с белой поверхности (например, листа бумаги) и изначально используем краски (голубую, пурпурную и желтую), чтобы вычитать из белого нужные цвета.
Также существуют и другие модели, которые могут быть полезны в зависимости от задач (компьютерное зрение, редакторы изображений, телевидение и т.д.), такие как HSV (Hue, Saturation, Value), YCrCb и другие, но на них мы останавливаться не будем.
На этом изображении видно, как картинка разбивается на каналы: красный, зелёный и синий.
Для простоты повествования, далее мы будем руководствоваться цветовой моделью RGB.
Мы понимаем, что для задания любого цвета достаточно сочетания трех базовых цветов — красного, зеленого и синего. Однако у разных людей восприятие этих цветов может слегка отличаться. Например, то, что один человек считает эталонным зеленым, другой можем воспринимать чуть иначе.
Возникает вопрос: какие именно оттенки красного, зеленого и синего нужно использовать, чтобы все могли согласиться, что это «правильные» базовые цвета?
Цветовые пространства
Проблемой, о которой я упоминал выше, занялась Международная Комиссия по Освещенности (CIE). Она разработала специальную диаграмму, представляющую все видимые человеческому глазу цвета, распределенные по длинам волн. Комиссия утвердила цветовую модель CIE XYZ, которая изображена ниже.
На этой диаграмме представлены все физически возможные цвета видимого спектра электромагнитного излучения, который охватывает диапазон от 380 до 700 нанометров. С помощью координат X и Y можно описать любой цветовой оттенок, который способен различить человеческий глаз. А если добавить третью координату — Z, становится возможным описать также и яркость этого цвета.
Наверное, замечали, что в параметрах монитора или дисплея можно часто увидеть треугольник внутри этой диаграммы — он показывает диапазон цветов, доступный для отображения на данном устройстве.
Кстати, на этой картинке мы не увидим всех цветов, так как наши мониторы не способны передать каждый оттенок, и некоторые цвета просто отображаются одинаково.
На изображении ниже показаны треугольники, отображающие спектр, охваченный различными устройствами. Эти треугольники называются цветовыми пространствами.
Чем цветовое пространство отличается от цветовой модели?
Цветовые модели определяют, как цвета могут быть представлены в виде числовых значений, тогда как цветовое пространство относится к конкретному диапазону цветов, который может быть отображён или напечатан в рамках данной цветовой модели.
Другими словами, цветовое пространство определяет гамму цветов, которые могут быть воспроизведены конкретным устройством, монитором или принтером. Таких пространств множество. У каждого свой диапазон цветов.
Здесь показано сравнение двух цветовых пространств. Если ваш монитор поддерживает качественное отображение, вы сможете почувствовать разницу между ними:
Большинство из нас обычно работает с цветами в формате HEX. Это довольно простой способ: первые два символа обозначают красный канал, следующие два — зелёный, и последние два — синий.
Итак, поскольку мы часто имеем дело с HEX, у меня есть вопрос на засыпку для вас.
Как вы думаете, какое цветовое пространство представляет собой HEX-код?
Варианты ответов:
Дело в том, что код цвета требует определённой интерпретации, чтобы действительно стать цветом. Сам по себе HEX-код ничего конкретного не означает — это просто способ представления значений, где каждый символ может принимать 16 различных позиций. Поскольку для каждого канала (красного, зелёного и синего) мы используем по два символа, это даёт 256 возможных значений на канал.
В цветовом пространстве, например, sRGB, принятом в индустрии как стандарт, это соответствует 8-битному пикселю на каждый канал. Умножив 256 на три канала, получаем около 17 миллионов возможных цветов.
Итак, чтобы HEX-код действительно стал цветом, ему необходимо цветовое пространство. В зависимости от того, с каким пространством вы сочетаете ваш HEX-код, результат может быть разным. Например, самый насыщенный зелёный цвет в sRGB находится в одном месте, в Display P3 — в другом, а в ProPhoto RGB он вообще выходит за границы видимого спектра человеческого глаза.
Здесь мы и подходим к проблеме, которая заставила меня написать эту статью. Почему же цвет из Figma отображался неправильно в симуляторе?
Ответ заключается в том, что Figma экспортирует цвета в другом цветовом пространстве.
Оказывается, в настройках Figma есть возможность указать, в каком цветовом пространстве нужно экспортировать изображение, что позволяет избежать подобных расхождений.
Выводы
Завершая статью, хочу подчеркнуть один важный момент: даже в профессиональных инструментах, таких как Figma, цвета могут интерпретироваться неверно. Например, Figma может отображать цвета в цветовом пространстве экрана (например, P3), но при экспорте перевести их в sRGB, что может исказить итоговое изображение. Это усугубляется, если изображение передаётся через мессенджеры, которые могут полностью исказить цвета.
Поэтому любые ассеты нужно не только проверять в итоговом цветовом пространстве, но и упаковывать в архив (например, ZIP) перед отправкой разработчику.
Надеюсь, эта статья была вам полезной. Спасибо!
