Чому саме цей градієнт кольору настільки привабливіший за інших?

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

Ось сайт прямо зараз:

Градієнти там виглядають цілком природно по дизайну. Але якщо я почну змішувати і поєднувати, закінчую це:

Я не можу знайти ще один гідний градієнт, який виглядає би "природним". Мені цікаво, що стоїть за психологією того, як ми сприймаємо ці поєднання кольорів ... Чи існує якесь правило, щоб знайти кольори, які добре поєднуються в градієнті? Я гадаю, це залежить від того, яке відчуття ти збираєшся. Я вдячний за будь-який внесок!

Основна відмінність початкового прикладу від ваших експериментів полягає в тому, що оригінал не охоплює настільки ж різкої зміни відтінку.

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

Така велика зміна не сприймається як одна зміна кольору, а скоріше як прогресування через кілька кольорів. Оскільки ваш градієнт досить ущільнений у ваших заголовках, це виходить досить різкою зміною і може пояснити, чому він не відчуває вас "природним".

Якщо ви хочете мати інший колір для ваших основних кольорових блоків "призначення", виберіть сусідній колір для початку градієнта. Наприклад, для кінцевої точки синьо-фіолетового кольору виберіть темно-синій або пурпуровий для вихідної точки. Для жовто-зеленого як кінцевої точки почніть з яскраво-зеленого або червоного.

Звичайно, вони все одно дадуть вам різний "настрій" залежно від настрою кольорів - синьо-фіолетовий набагато більш холодний, спокійний колір, ніж рожевий в оригіналі. Але принаймні градієнти повинні виглядати трохи плавніше.

Оскільки ви запитуєте "чому вони сприймаються по-різному", ось ще одна (дуже прискіплива) річ, яку слід врахувати: сприйнята люмінесценція кольору RGB. Це важко застосувати, тому сприйміть мою відповідь майже так само, як дрібниці:)

Значення люмінесценції кольору вказує на те, як "засвітився" ви його сприймаєте. Якщо кольором буде лампочка, то колір із низькою люмінесценцією сприймається як тьмяний (лампочка потужністю 40 Вт), тоді як колір з високою люмінесценцією сприймається як дуже яскравий (колба потужністю 100 Вт).

Кольори RGB насправді відображаються за допомогою маленьких "лампочок". Екрани складаються з крихітних «лампочок», по три для кожного пікселя: R (ed), G (reen) та B (lue). Конкретні значення R, G ad B кольору вказують на те, наскільки яскравою повинна бути освітлена кожна крихітна лампочка, щоб створити ілюзію цього кольору. Наприклад, кольоровий помаранчевий RGB (255, 100, 0) створюється, повертаючи червону лампочку до максимальної потужності (255), роблячи зелену лампочку напівтемневою (100) і вимикаючи синю лампочку (0).

Ось ілюстрація, яка показує деякі кольори та те, як "яскравим" повинен бути зроблений кожен із компонентів RGB, щоб створити ілюзію кольору. Маленькі крапки під кожним кольором вказують, наскільки тьмяний або яскравий компонент.

Як ви бачите на ілюстрації, наприклад, для створення білого кольору, ви перетворюєте 3 компоненти на максимум (255). Це поєднання трьох крихітних «лампочок» сприймається оком як біле (пояснюючи, чому це було б великим відступом). Щоб створити чорний колір, вимкніть їх усі. Це легко: немає світла, немає кольору.

Люмінесценція кожного кольору обчислюється додаванням "наскільки яскравим" кожен з 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, і градієнт зараз переходить від (завжди модного) Аквамарину Зеленого до Синього, що є прохолодним, заспокійливим градієнтом з морськими відгомонами.

Зауважте, сприйняття кольору має дуже особисту складову. Те, що може бути "природним" для іншої людини, може сприйматися як відхилення.