Генератор палитр цветов CIE Lab (Lch) — линейных с точки зрения человеческого восприятия ++ Raphael сolorpicker

Продолжая тему интересных проектов с использованием javascript, представляю сразу два-в-одном — «пипетка для выбора цвета» и «генератор палитр CIE Lab (Lch)«.

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

Обработка создана на основе скриптов http://labs.adamluptak.com/javascript-color-blending/

 

Зачем это нужно?

 

Каждый, кто сталкивается с задачами автоматического оформления цветом большого количества разнообразных данных, мечтает об автоматической генерации гармонично воспринимаемых пользователем комбинаций цветов. Первым шагом к решению этой задачи является генерация цветов в цветовом пространстве CIE Lab (Lch). Данное цветовое пространство разрабатывалось таким образом, чтобы расстояние между цветами было идентично человеческому восприятию. Цветовое пространство RGB не отвечает этому требованию, что мы часто наблюдали на заре зарождения Интернета (когда html страницы пестрили линейно вычисленными цветами RGB).

В настоящее время, кроме CIE Lab, существуют более совершенные модели CIE CAM и NCS, но они пока не применяется в промышленных масштабах, в отличие от CIE Lab.

В модели CIE Lab осуществляет внутреннюю программную обработку изображений такой известный программный продукт, как Adobe Photoshop, для которого это пространство является базовым (в него происходит преобразование из RGB или CMYK, затем обрабатывается, затем преобразовывается обратно). Модель CIE Lab (HCL, Lch) используется в проекте d3js (визуализация многомерных связанных данных) для автоматического построения палитр цветов серий.

Рассмотрим проблему с RGB более подробно — почему RGB нам не подходит.

Обычный переход между цветами RGB описывается следующим алгоритмом линейной интерполяции:

R’ = R1 + е * (R2 — R1) 

G’ = G1 + е * (G2 — G1) 

В’ = B1 + е * (В2 — В1)

где e — позиция отрезка в диапазоне от 0 до 1.

Такая линейная RGB интерполяция выглядит не очень приятно, что можно увидеть на следующих примерах:

 

или более наглядно от синего к желтому

Обратите внимание на последнем изображении в центре палитры — серый цвет.

Если мы измерим насыщенность этих цветов, например, в Photoshop, то получим следующую последовательность:

 [1.0] [0.8] [0.5] [0.0] [0.5] [0.8] [1.0]

 Таким же образом будет изменяться и яркость!

Можно попытаться сохранить яркость и насыщенность, используя полярное представление RGB в виде HSB (HSL), путем изменения угла Hue. Но в этом случае, у нас будет ограничен выбор конечного цвета — ведь у него должны совпасть и яркость, и насыщенность с первоначальным цветом. Поэтому, для перехода между цветами нам придется использовать линейную интерполяцию.

Попробуем провести линейную интерполяцию между двумя цветами HSB по классическому алгоритму:

d = h2 - h1
if (h1 > h2) then swap(h1, h2), d = -d, f = 1 - f
if (d > 180) then h1 = h1 + 360, h = ( h1 + f * (h2 - h1) ) mod 360
if (d

 где h изменяется в диапазоне от 0 до 360 градусов.

Попробовав переход от синего к желтому, получим следующую последовательность:

Математически все ровно, насыщенность и яркость у всех цветов в RGB вроде бы одинаковая. Но как воспринимает эти цвета человеческий глаз? Посмотрите сами на эту картинку еще раз. Синий гораздо темнее желтого, cyan — ярче всех, а зеленые цвета очень близки (виден резкий переход к cyan).

Более полное описание недостатков пространства RGB можно прочитать в этой статье википедии: http://en.wikipedia.org/wiki/HSL_and_HSV#Disadvantages

Теперь посмотрим, как будет выглядеть такой же градиент в пространстве CIE Lab (Lch):

 

Давайте подведем итоги. На следующих изображения показаны отличия градиентов в моделях RGB (верхняя строка), HSB (средняя строка) и CIE Lab (Lch) (нижняя строка).

 

Выбор очевиден.