Почему этот градиент цвета намного привлекательнее других?

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

Вот сайт прямо сейчас:

Градиенты там выглядят вполне естественно для дизайна. Но если я начну смешивать и сопоставлять, я получу следующее:

Я не могу найти другой приличный градиент, который выглядит "естественным". Мне интересно, какая психология стоит за тем, как мы воспринимаем эти сочетания цветов ... Есть ли какое-то правило, чтобы найти цвета, которые хорошо сочетаются в градиенте? Я полагаю, это зависит от того, к какому чувству вы собираетесь. Я ценю любой вклад!

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

Переход от золотисто-желтого до пурпурно-розового цвета составляет около 1/6 оборота цветового круга. Напротив, ваши эксперименты (от оранжево-красного до сине-фиолетового, от сине-фиолетового до желто-зеленого и от голубого до сине-фиолетового) имеют длину более 1/4 оборота.

Это большое изменение не воспринимается как одно изменение цвета, а скорее как прохождение через несколько цветов. Поскольку ваш градиент довольно сжат в заголовках, это выглядит довольно резким изменением и может объяснить, почему он не кажется вам «естественным».

Если вы хотите иметь другой цвет для основных цветовых блоков «назначения», выберите соседний цвет для начала градиента. Например, для сине-фиолетового цвета в качестве конечной точки выберите темно-синий или пурпурный в качестве начальной точки. Для желто-зеленого цвета в качестве конечной точки начните с ярко-зеленого или красного цвета.

Конечно, они все равно дадут вам разные «настроения» в зависимости от настроения задействованных цветов - сине-фиолетовый цвет намного холоднее, спокойнее, чем розовый в оригинале. Но по крайней мере градиенты должны выглядеть немного плавнее.

Так как вы спрашиваете «почему они воспринимаются по-разному», вот еще одна (очень вызывающая) вещь, которую следует учитывать: воспринимаемое свечение цвета RGB. Это трудно применить, поэтому примите мой ответ почти так же, как мелочи :)

Значение свечения цвета указывает на то, как «загорелись» вы его воспринимаете. Если бы цвет представлял собой лампочку, цвет с низкой люминесценцией воспринимался бы как тусклый (лампа 40 Вт), тогда как цвет с высокой люминесценцией воспринимался бы как очень яркий (лампа 100 Вт).

Цвета RGB на самом деле отображаются с помощью маленьких «лампочек». Экраны состоят из крошечных «лампочек», по три на каждый пиксель: R (ed), G (reen) и B (lue). Определенные значения R, G и B цвета указывают на то, насколько яркой должна быть каждая маленькая лампочка, чтобы создать иллюзию этого цвета. Например, оранжевый цвет RGB (255, 100, 0) создается путем поворота красной лампы на максимальную мощность (255), превращения зеленой лампы в полутемное (100) и выключения голубой лампы (0).

Вот иллюстрация, показывающая некоторые цвета и то, как «яркий» каждый из компонентов RGB должен быть сделан, чтобы создать иллюзию цвета. Маленькие точки под каждым цветом указывают, насколько тусклый или яркий компонент сделан.

Как вы можете видеть на рисунке, например, для создания белого вы поворачиваете 3 компонента до максимума (255). Эта комбинация из 3-х крошечных «лампочек» воспринимается глазом как белая (объясняя, почему это было бы большим отступлением). Чтобы создать черный, вы выключаете их все. Это легко: нет света, нет цвета.

Люминесценция каждого цвета рассчитывается путем добавления «насколько ярко» каждый из 3 компонентов. Белый будет цветом с наивысшим свечением, так как 3 компонента повернуты к максимальному значению. Черный, будет тот, с самым низким. Желтый будет иметь более высокое свечение, чем зеленый, так как для желтого цвета вам нужно максимум 2 компонента, а для зеленого - только один. Итак, более или менее вы могли бы сказать, что

L = R + G + B

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

L = 0,2126 R + 0,7152 G + 0,0722 B

Вот снова иллюстрация с рассчитанной люминесценцией для каждого цвета.

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

Теперь я взял цвета из двух ваших оригинальных палитр и рассчитал их свечение.

В первом случае, который вам нравится, вы заметите, что свечение первого цвета внизу ниже (125), чем у второго цвета, вверху (200). Таким образом, градиент воспринимается как увеличение яркости, как если бы он загорался.

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

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

Это объясняет, почему, даже если вы выберете 2 оттенка, которые расположены на одинаковом расстоянии друг от друга на цветовом круге, чем те, которые вам нравятся, результат будет восприниматься по-разному.

От http://www.colormatters.com/color-and-design/basic-color-theory

1 - цветовая схема на основе аналогичных цветов

Аналогичные цвета - это любые три цвета, которые расположены рядом на круговом цветовом круге из 12 частей, например желто-зеленый, желтый и желто-оранжевый. Обычно один из трех цветов преобладает.

2 - Цветовая схема на основе дополнительных цветов

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

3 - Цветовая схема, основанная на природе

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

Просто добавив в ответ AmeliaBR (должен быть комментарий, но я хочу опубликовать изображение). Один из способов «сдвинуть» ваш оттенок, но сохранить одинаковое относительное расстояние между начальным и конечным цветами, можно использовать инструмент «Оттенки» в Photoshop.

Возьмите первое изображение (изображение с градиентом, которое вам нравится) и откройте его в Photoshop. Затем откройте инструмент Hue / Saturation ( Image->Adjustment->Hue Saturationили Ctr+U) и поиграйте с первым ползунком (Hue). Это сместит оттенок всего изображения, но сохранит ту же связь между всеми существующими оттенками (в частности, начальный и конечный оттенки ваших градиентов). Поскольку задняя часть вашего интерфейса черная (или нейтрально-серая), изменение оттенка не повлияет на него.

Если вы нашли нужную комбинацию, то просто примите изменения оттенка / насыщенности (щелкните OK) и с помощью инструмента «Пипетка» (нажмите I) выберите начальный и конечный цвета градиента.

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

Имейте в виду, восприятие цвета имеет очень личную составляющую. То, что вы можете найти «естественным» для какого-то другого человека, может восприниматься как отклонение от нормы.