Dlaczego ten gradient kolorów jest o wiele bardziej atrakcyjny niż inne?

Bawię się z niektórymi gradientami na stronie, którą rozwijam, i naprawdę interesuje mnie psychologia lub inne znaczenie, dlaczego niektóre kolory wydają się bardziej atrakcyjne niż inne.

Oto strona w tej chwili:

Tamte gradienty wyglądają całkiem naturalnie. Ale jeśli zacznę miksować i dopasowywać, kończę na tym:

Nie mogę znaleźć innego przyzwoitego gradientu, który wygląda „naturalnie”. Zastanawiam się, jaka psychologia stoi za tym, jak postrzegamy te mieszanki kolorów ... czy istnieje jakaś reguła, aby znaleźć kolory, które pasują do siebie w gradiencie? Wyobrażam sobie, że zależy to od tego, jak chcesz. Doceniam każdy wkład!

Główna różnica między początkowym przykładem a eksperymentami polega na tym, że oryginał nie obejmuje prawie tak drastycznej zmiany odcienia.

Przejście ze złotożółtego na purpurowy / różowy to około 1/6 obrotu na kole kolorów. W przeciwieństwie do tego, twoje eksperymenty (od pomarańczowo-czerwonego do niebiesko-fioletowego, niebiesko-fioletowego do żółto-zielonego i cyjanowego do niebiesko-fioletowego) trwają dłużej niż 1/4 obrotu.

Tak wielka zmiana nie jest postrzegana jako pojedyncza zmiana koloru, ale raczej jako przejście przez wiele kolorów. Ponieważ gradient jest raczej skondensowany w nagłówkach, jest to dość ostra zmiana i może wyjaśniać, dlaczego nie wydaje ci się „naturalny”.

Jeśli chcesz mieć inny kolor dla głównych bloków kolorów „docelowych”, wybierz kolor sąsiedni na początek gradientu. Na przykład dla niebiesko-fioletowego jako punktu końcowego wybierz ciemnoniebieski lub karmazynowy jako punkt początkowy. W przypadku żółto-zielonego jako punktu końcowego zacznij od jasnozielonego lub czerwonego.

Oczywiście nadal będą one dawać różne „nastroje” w zależności od nastroju zaangażowanych kolorów - niebiesko-fioletowy jest znacznie chłodniejszym, spokojniejszym kolorem niż różowy w oryginale. Ale przynajmniej gradienty powinny wyglądać nieco płynniej.

Ponieważ pytasz „dlaczego są postrzegani inaczej”, oto kolejna (bardzo naukowa) rzecz do rozważenia: postrzegana luminescencja koloru RGB. Trudno to zastosować, więc weź moją odpowiedź prawie tak samo jak ciekawostki:)

Wartość luminescencji koloru wskazuje, jak postrzegasz go „rozświetlony”. Jeśli kolorem byłaby żarówka, kolor o niskiej luminescencji byłby postrzegany jako przyćmiony (żarówka 40 W), natomiast kolor o wysokiej luminescencji byłby postrzegany jako bardzo jasny (żarówka 100 W).

Kolory RGB są wyświetlane za pomocą małych „żarówek”. Ekrany składają się z małych „żarówek”, po trzy na każdy piksel: R (ed), G (reen) i B (lue). Konkretne wartości koloru R, G i B koloru wskazują, jak jasna powinna być każda mała żarówka, aby stworzyć iluzję tego koloru. Na przykład kolor pomarańczowy RGB (255, 100, 0) jest tworzony przez przekręcenie czerwonej żarówki do maksymalnej mocy (255), sprawienie, że zielona żarówka jest półciemniona (100) i wyłączenie niebieskiej żarówki (0).

Oto ilustracja przedstawiająca niektóre kolory i sposób „jasności” każdego z elementów RGB, aby stworzyć iluzję koloru. Małe kropki pod każdym kolorem wskazują, jak ciemny lub jasny jest komponent.

Jak widać na ilustracji, aby na przykład utworzyć biały, należy maksymalnie obrócić 3 komponenty (255). Ta kombinacja 3 małych „żarówek” jest postrzegana przez oko jako biała (co wyjaśnia, dlaczego miałaby to być duża dygresja). Aby stworzyć czerń, wyłącz je wszystkie. To proste: brak światła, brak koloru.

Luminescencję każdego koloru oblicza się, dodając „jak jasno” każdy z 3 składników. Biały byłby kolorem o najwyższej luminescencji, ponieważ 3 składniki zostały obrócone do maksymalnej wartości. Czarny byłby tym z najniższym. Żółty miałby najwyższą luminescencję niż zielony, ponieważ aby uzyskać żółty potrzebujesz maksymalnie 2 składników, ale aby uzyskać zielony potrzebujesz tylko jednego. Tak więc mniej więcej można to powiedzieć

L = R + G + B

Jest to jednak trochę bardziej skomplikowane. Patrząc na ilustrację, zauważysz, że zielony element wydaje się jaśniejszy. W rzeczywistości jest postrzegany przez oko jako najjaśniejszy. Z drugiej strony niebieski jest postrzegany jako bardzo ciemny. Uwzględnia to dokładny wzór do obliczania luminescencji.

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

Oto ponownie ilustracja z obliczoną luminescencją dla każdego koloru.

Zauważysz, że, jak mogłoby to powiedzieć twoje oko, żółty jest jaśniejszy niż pomarańczowy, ale pomarańczowy jest mniej więcej tak jasny jak magenta.

Teraz wziąłem kolory z dwóch twoich oryginalnych palet i obliczyłem ich luminescencję.

W pierwszym przypadku, który ci się spodoba, zauważysz, że luminescencja pierwszego koloru na dole jest niższa (125) niż ta drugiego koloru na górze (200). Gradient jest zatem postrzegany jako wzrost jasności, tak jakby był oświetlony.

W drugim przypadku nie ma dużej różnicy, więc gradient jest postrzegany jako zmiana odcienia.

W trzecim przypadku dolny kolor ma wyższą luminescencję niż górny, więc gradient jest postrzegany jako spadek jasności, tak jakby ściemniał.

To by tłumaczyło, dlaczego nawet po wybraniu 2 odcieni, które są umieszczone względnie w tej samej odległości na kole kolorów niż te, które lubisz, wynik byłby postrzegany inaczej.

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

1 - Schemat kolorów oparty na analogicznych kolorach

Analogiczne kolory to dowolne trzy kolory, które są obok siebie na 12-częściowym kole kolorów, takie jak żółto-zielony, żółty i żółto-pomarańczowy. Zwykle dominuje jeden z trzech kolorów.

2 - Schemat kolorów oparty na uzupełniających się kolorach

Kolorami uzupełniającymi są dowolne dwa kolory, które są naprzeciw siebie, takie jak czerwony i zielony oraz czerwono-fioletowy i żółto-zielony. Na powyższej ilustracji występuje kilka odmian żółto-zielonych w liściach i kilka odmian czerwono-fioletowych w orchidei. Te przeciwstawne kolory zapewniają maksymalny kontrast i maksymalną stabilność.

3 - Kolorystyka oparta na naturze

Natura stanowi idealny punkt wyjścia dla harmonii kolorów. Na powyższej ilustracji czerwony żółty i zielony tworzą harmonijny wzór, niezależnie od tego, czy ta kombinacja pasuje do technicznego wzoru harmonii kolorów.

Właśnie dodając do odpowiedzi AmeliaBR (powinien to być komentarz, ale chcę zamieścić zdjęcie). Jednym ze sposobów wypróbowania „przesunięcia” odcienia, ale zachowania tej samej względnej odległości między kolorem początkowym i końcowym, może być użycie narzędzia barwy Photoshopa.

Zrób pierwsze zdjęcie (to z gradientem, który lubisz) i otwórz je w Photoshopie. Następnie otwórz narzędzie Barwa / Nasycenie ( Image->Adjustment->Hue Saturationlub Ctr+U) i graj za pomocą pierwszego suwaka (Barwa). Spowoduje to przesunięcie odcienia całego obrazu, ale utrzyma ten sam związek między wszystkimi istniejącymi odcieniami (w szczególności odcień początkowy i końcowy twoich gradientów). Ponieważ tył interfejsu jest czarny (lub neutralny szary), zmiana odcienia nie wpłynie na to.

Jeśli znajdziesz kombinację, którą lubisz, po prostu zaakceptuj zmiany Barwy / Nasycenia (kliknij OK) i za pomocą narzędzia kroplomierza (naciśnij I) wybierz kolory początkowe i końcowe gradientu.

W tym przykładzie zmieniłem odcień -155, a teraz gradient zmienia się z (zawsze modnej) Aquamarine Green na Blue, co jest chłodnym, uspokajającym gradientem z echami morskimi.

Pamiętaj, że postrzeganie kolorów ma bardzo osobisty komponent. To, co możesz uznać za „naturalne” dla innej osoby, może być postrzegane jako aberracja.