gifts2017

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

Опубликовал Роман Цованян (pfihr) в раздел Программирование - Работа с интерфейсом

Генератор палитр + пипетка. Для цветового оформления данных в цветовом пространстве CIE Lch (полярное CIE Lab). Особенностью данного цветового пространства является его отличная адаптация к человеческому восприятию, гораздо более точная, чем RGB. CIE Lch используется для автоматической генерации градиентов или последовательности цветов для представления большого количества данных, приятного человеческому глазу. Используется в таких web-проектах, как, например, d3js, Adobe Kuler и т.п.

Продолжая тему интересных проектов с использованием 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 интерполяция выглядит не очень приятно, что можно увидеть на следующих примерах:

RGB blending 

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

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

Если мы измерим насыщенность этих цветов, например, в 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) (нижняя строка).

 

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

Скачать файлы

Наименование Файл Версия Размер Кол. Скачив.
бсГармонияЦвета4.epf
.epf 79,09Kb
02.12.13
20
.epf 79,09Kb 20 Скачать

См. также

Подписаться Добавить вознаграждение

Комментарии

1. Роман Цованян (pfihr) 02.12.13 11:05
Обновление версии обработки - теперь расчет палитры идет по часовой стрелке до 360 градусов (раньше был только до 180).
2. Дмитрий Луканов (TheGrr) 02.12.13 14:43
3. Serj (Serj1C) 03.12.13 12:37
не зачет. Как внедрять в свои решения?
Вся функциональность в ява-скрипте.
Тупо обертка в управляемую форму.
4. Роман Цованян (pfihr) 03.12.13 14:41
(3) Serj1C, так и внедрять, как функциональность в яваскрипте.
Можно перенести все процедуры по рассчету цветовых пространств в код 1С.
Но я пока этим не занимался, и не собираюсь.
5. Сергей Кудашкин (sikuda) 03.12.13 16:39
(3) Serj1C, Легко. Вставить в макет(сжатый js). В 1с оставить только результат. Он там и нужен.
6. Станислав Раташнюк (stanru1) 04.12.13 09:06
Спасибо и за статью, и за идею! То, о чем я давно мечтал - красивые сочетания цветов!
7. Владимир Каракозов (karakozov) 04.12.13 10:53
Благодарность за статью, решение не для всех, но кому то будет несомненно полезно.
8. Денис (Den_D) 15.10.15 10:57
Интересный подход. На сколько я понимаю, что бы эффективно работать под веб клиентом все чаще решения уходят в сторону HTML-полей на форме и соответственно весь их функционал включая JS будет все более востребован прогрессивными программистами.
Для написания сообщения необходимо авторизоваться
Прикрепить файл
Дополнительные параметры ответа