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

24

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:

Logowanie do oryginalnej witryny Główny węzeł witryny oryginalnej

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

Inna próba gradientu Inna próba gradientu Inna próba gradientu

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!

Hayden McAfee
źródło
2
Jest to pytanie wyłącznie subiektywne i oparte na opiniach. To, że czujesz , że niektóre gradienty są lepsze, nie oznacza, że ​​zrobi to ktoś inny.
Scott,
6
Zgadzam się ze Scottem i posunę się tak daleko, że odpowiem „Dlaczego dobrze wyglądają?” z „Kto powiedział, że dobrze wyglądają?”. Ale to subiektywne. Mój obiektywny komentarz to: Gwarantuję, że oceniasz kolory w kontekście całego ekranu zawierającego jasnozieloną ramkę okna. Sam ten kolor będzie cię uprzedzał w stosunku do niektórych wyborów kolorów w okienku ekranu.
horatio
Bardzo dobre punkty zarówno na skórze przeglądarki, jak i na niebieskim kolorze. Głosowałbym, gdybym miał przedstawiciela! Zacznę patrzeć na nie w trybie pełnoekranowym, aby uniknąć tego błędu.
Hayden McAfee
Coś, co dzisiaj zauważyłem. Wszystkie te gradienty są możliwe z różnymi odmianami par LAB podczas obracania wzdłuż A. W przypadku Photoshopa przejdź do próbnika kolorów, zaznacz pole wyboru apo prawej stronie i baw się pionowym suwakiem przy palecie. Większość (wszystkie?) Kombinacji tutaj odnotowanych można znaleźć przy różnych wartościach Aosi. Nie jestem pewien, czy ma to jakieś naukowe uzasadnienie, ale była to tylko obserwacja.
Qix

Odpowiedzi:

34

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

Koło kolorów nasyconych barw

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.

AmeliaBR
źródło
Obliczyłem przesunięcie odcienia dla dwóch oryginalnych kolorów i wyszedłem z wartością 96 (z 360 możliwych wartości odcienia). A więc około jednej czwartej obrotu wokół koła kolorów. Zacząłem szukać innych wartości kolorów z tą samą różnicą, a mimo to wartości wydawały mi się dziwne, choć bardziej naturalne. Wybacz mi nieznajomość kolorów i tym podobnych, ale czy możesz wymyślić jakiś konkretny powód? Być może są to tylko kolory o innym nastroju. i.imgur.com/utU1Oex.png
Hayden McAfee
W takim przypadku mam wrażenie, że nie tyle chodzi o gradient, ile o ostateczny kolor; jasna zieleń jest dość niepokojąca. Porównaj go z wersją w teście @ cockypup, który jest znacznie bardziej miękki (mniej nasycony / jasny) zielony. O wiele trudniej jest oszacować nastroje kolorów, ale ogólnie mniej nasycone lub wtórne kolory są nieco spokojniejsze niż jaskrawe czerwienie i zielenie. Robi się bardzo subiektywnie, ale istnieje wiele zasobów, wiele z przykładami dobrych kombinacji kolorów.
AmeliaBR
4
Oto kolejna rzecz do rozważenia: kontrast. Żółty jest najjaśniejszym kolorem, ma maksymalny kontrast z czernią. W pierwszym przykładzie żółty jest tylko szczytem gradientu. Nie wystaje. „Czuje się” prawie jak najciekawsze na górze. Pomaga przesuwać oko od dołu do góry gradientu. W trzecim przykładzie żółty jest głównym kolorem gradientu. Ciało gradientu wystaje. Szczyt gradientu, który kulturowo jest odczytywany jako wartość maksymalna, wydaje się mniej ważny niż ciało. Oko walczy w górę i w dół. Może to sprawić, że będzie mniej naturalny.
cockipup
29

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.

wprowadź opis zdjęcia tutaj

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.

wprowadź opis zdjęcia tutaj

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ę.

wprowadź opis zdjęcia tutaj

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.

cockipup
źródło
Fantastyczna odpowiedź! Dziękuję za jasne wyjaśnienie; wydaje się, że moją odpowiedzią jest kombinacja tych odpowiedzi.
Hayden McAfee
To niesamowita odpowiedź. Jestem pewien, że to w połączeniu z odpowiedzią Haydena może przynieść niesamowite rezultaty.
Qix
2
Zauważ, że jest to nieco skomplikowane z powodu wyświetlania gamma. Aby uzyskać dokładną wartość luminescencji dla wyświetlanego koloru RGB, należy najpierw zastosować korekcję gamma, aby przekonwertować wartości R / G / B na liniową przestrzeń kolorów przed uśrednieniem ich przy użyciu formuły. Dla typowego gamma wyświetlacza wynoszącego 2,2 poprawną formułą jest więc L = (0,2126 R ^ 2,2 + 0,7152 G ^ 2,2 + 0,0722 B ^ 2,2) ^ (1 / 2,2).
Ilmari Karonen
4

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.

użytkownik3437670
źródło
1) Ciemnozielony do jasnożółtego. Jak zabarwiony obraz w skali szarości. 2) Czerwony v / s Wiosna Zielony / Cyjan. Orange v / s Azure. Indigo / Violet vs. Yellow. Jeden z dwóch powinien być mniej nasycony niż drugi, aby uzyskać dodatkowy kontrast. 3) Zauważ, że czerwień jest ciemniejsza i bardziej nasycona niż kombinacja zielono-żółta, która jest również gradientem od ciemnozielonego do jasnożółtego.
Locoluis
3

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.

wprowadź opis zdjęcia tutaj

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.

cockipup
źródło
Rozumiem, to dobry sposób na podejście. Może powinienem wziąć udział w zajęciach z teorii kolorów, aby lepiej zrozumieć, jak pewne kolory są ogólnie postrzegane!
Hayden McAfee