[the-best-of-thebest]

Пишет  ymik:

ТрактатЪ о силе цвета
Делаю кросс-пост из хабра:

Что такое сила цветовосприятия?

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

Технически это связано с силой сигнала, поступающего в мозг от S, M и L колбочек: тона, близкие к жёлтому воспринимаются одновременно S и M рецепторами, а тона, близкие к красно-фиолетовому (маженте) – M и L.
Cамым ярким тоном по восприятию является красно-оранжевый, чуть менее яркими воспринимаются жёлто-зелёные и красно-фиолетовые тона. Явными аутсайдерами являются синие и лазурные тона: они по интенсивности в 3,5 и 5 раз слабее, чем самый яркий тон.

Я создал диаграммку, иллюстрирующую силу восприятия цвета:


^{На диаграмме слева находятся более яркие цвета, справа – менее яркие. Чтобы подчеркнуть уровень восприятия менее яркие тона специально затемнены.}

Естественно, что при нарушениях цветового зрения яркость восприятия цвета меняется. Вот, что происходит в случае протанопии (нарушение восприятия красного):

В случае дейтанопии (дефицит зелёного):

И тританопии (неразличимость синего):

Как это используется в дизайне? Триадная схема подбора цветовой палитры.

Для создания цветовых схем для сайтов (да и вообще по жизни) широко используется подход «триадных цветов». Суть в чём: берётся цветовой круг (полученный при помощи HSL модели)



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

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

Как следствие – прекрасная возможность делать рамки к фотографиям или объектам на странице такими, чтобы фотография воспринималась без рамки, а не единым целым с нею, как бывает в случае выполнения рамки из нейтрального цвета.


^{Ещё два примера рамок из триадных цветов.}

Проблемы траидного подбора

Но давайте-ка проанализируем этот цветовой круг с точки зрения силы восприятия цвета! Возьмём круглую цветовую мишень и подсветим цвета на ней с целью посмотреть, составят ли цвета, взятые с помощью равностороннего треугольника гармоничную триаду:

^{Справа – оригинальный цветовой круг, слева – результат обработки. На левом круге для более сильных цветов искусственно увеличена saturationвыраженность цвета. Кликните, чтобы увидеть картинки в увеличенном виде; тут можно посмотреть ещё несколько цветовых мишеней.}

Мысленно расположим равносторонний треугольник так, чтобы одна из его вершин попадала на максимум жёлтого цвета. И что же мы видим? - Что цвета, находящиеся на концах треугольника, взятые в равных пропорциях в белый цвет не складываются! А точнее сумма этих цветов будет восприниматься как молочно-жёлтый, с уклоном в розовый цвет. А для того, чтобы получить действительно гармоничную триаду требуется сделать жёлтый и маженту чуть менее выраженными (убрать saturation примерно на 6% для жёлтого и на 2% для маженты).
Причём, что важно, триадная выборка цветов, в принципе неплохо работая на ярких, выраженных цветах плохо работает на цветах светлых и тёмных. Чем светлее или темнее цвет, тем большую гармоническую ошибку даст триадный подбор по стандартному цветовому кругу.

Комплементарные цвета

Другим методом подбора цветовой палитры является метод комплементарных цветов: берётся тот же цветовой круг и через его центр проводится отрезок, на разных концах которого будут цвета, которые в сумме, опять же, должны давать белый.

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

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

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

Подбор палитр и дальтонизм

Теперь, когда известны теоретические основы методов подбор палитр, можно, наконец, взглянуть на то, как выглядит цветовой круг при 60% потере цветового зрения:


^{представлены «подсвеченные» в соответствии с восприятием картинки}

Комментировать представленные диаграммы я не буду, к вопросу о том, как они были получены, смотреть сюда.

Как дизайнерам учитывать особенности цветовосприятия дальтоников?

Дизайнерам и юзабелистам, думающим о дальтониках рекомендую к прочтению статью «Эффективный цветовой контраст»
Надеюсь, что я достаточно полно осветил тему дальтонизма в дизайне, по этому следующий пост будет о распределении внимания по картинке.