Perché questo gradiente di colore è molto più attraente di altri?

Ho giocato con alcuni gradienti su un sito che sto sviluppando, e sono davvero interessato alla psicologia o ad altri significati dietro il motivo per cui alcuni colori sembrano più attraenti di altri.

Ecco il sito adesso:

Le sfumature sembrano abbastanza naturali per il design. Ma se inizio a mescolare e abbinare, finisco con questo:

Non riesco a trovare un altro gradiente decente che sembri "naturale". Mi chiedo quale sia la psicologia dietro il modo in cui percepiamo questi mix di colori ... esiste una sorta di regola per trovare i colori che vanno bene insieme in una sfumatura? Immagino che dipenda dal tipo di sensazione che stai cercando. Apprezzo qualsiasi input!

La differenza principale tra l'esempio iniziale e i tuoi esperimenti è che l'originale non copre un cambiamento altrettanto drastico nella tonalità.

Passare dal giallo dorato al magenta / rosa è di circa 1/6 di giro sulla ruota dei colori. Al contrario, i tuoi esperimenti (da rosso-arancio a blu-viola, da blu-viola a giallo-verde e da ciano a blu-viola) sono tutti più di 1/4 di giro.

Quel cambiamento non è percepito come un singolo spostamento in un colore, ma piuttosto come una progressione attraverso più colori. Poiché il tuo gradiente è piuttosto condensato nelle intestazioni, questo si presenta come un cambiamento piuttosto netto e può spiegare perché non ti sembra "naturale" per te.

Se si desidera avere un colore diverso per i blocchi di colore "destinazione" principali, selezionare un colore adiacente per l'inizio del gradiente. Ad esempio, per il blu-violetto come punto finale, selezionare un blu intenso o un magenta per il punto iniziale. Per il giallo-verde come endpoint, iniziare con verde brillante o rosso.

Ovviamente, questi ti daranno comunque "stati d'animo" diversi a seconda dell'umore dei colori coinvolti: il blu-viola è un colore molto più fresco e più calmo rispetto al rosa dell'originale. Ma almeno le pendenze dovrebbero apparire un po 'più morbide.

Dato che stai chiedendo "perché sono percepiti in modo diverso", ecco un'altra cosa (molto geek) da considerare: la luminescenza percepita di un colore RGB. Questo è difficile da applicare, quindi prendi la mia risposta quasi come una banalità:)

Il valore di luminescenza di un colore di indica come "illuminato" lo percepisci. Se il colore fosse una lampadina, un colore con bassa luminescenza verrebbe percepito come fioco (lampadina da 40 W), mentre un colore con alta luminescenza verrebbe percepito come molto luminoso (lampadina da 100 W).

I colori RGB vengono infatti visualizzati utilizzando piccole "lampadine". Gli schermi sono composti da minuscole "lampadine", tre per ogni pixel: R (ed), G (reen) e B (lue). I valori R, G e B specifici di un colore indicano la luminosità di ogni minuscola lampadina per creare l'illusione di quel colore. Ad esempio, il colore arancione RGB (255, 100, 0) viene creato ruotando la lampadina rossa alla sua massima potenza (255), rendendo la lampadina verde semi-fioca (100) e spegnendo la lampadina blu (0).

Ecco un'illustrazione che mostra alcuni colori e quanto "brillante" dovrebbe essere fatto ciascuno dei componenti RGB per creare l'illusione del colore. I puntini sotto ciascun colore indicano quanto sia debole o luminoso il componente.

Come puoi vedere nell'illustrazione, per creare bianco, ad esempio, devi ruotare i 3 componenti al massimo (255). Questa combinazione delle 3 minuscole "lampadine" viene percepita dall'occhio come bianca (spiegando perché sarebbe una grande digressione). Per creare il nero, li spegni tutti. È facile: nessuna luce, nessun colore.

La luminescenza di ciascun colore viene calcolata aggiungendo "quanto è luminoso" ciascuno dei 3 componenti. Il bianco sarebbe il colore con la massima luminescenza, poiché i 3 componenti sono rivolti al suo valore massimo. Nero, sarebbe quello con il più basso. Il giallo avrebbe una luminescenza più alta del verde poiché per rendere giallo hai bisogno di 2 componenti al massimo, ma per renderlo verde hai bisogno solo di uno. Quindi, più o meno potresti dirlo

L = R + G + B

È un po 'più complicato però. Osservando l'illustrazione noterai che la componente verde sembra essere più luminosa. È, infatti, percepito dall'occhio come il più luminoso. Il blu, dall'altra parte, è percepito come molto fioco. La formula esatta per calcolare la luminescenza ne tiene conto.

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

Ecco di nuovo l'illustrazione, con la luminescenza calcolata per ciascun colore.

Noterai che, come avrebbe potuto dirti l'occhio, il giallo è più luminoso dell'arancione ma l'arancione è più o meno luminoso del magenta.

Ora, ho preso i colori da due delle tue tavolozze originali e ho calcolato la loro luminescenza.

Nel primo caso, quello che ti piace, noterai che la luminescenza del primo colore, nella parte inferiore è inferiore (125) rispetto a quella del secondo colore, nella parte superiore (200). Il gradiente, quindi, viene percepito come un aumento della luminosità, come se si stesse illuminando.

Nel secondo caso, non c'è molta differenza, quindi il gradiente viene percepito proprio come un cambiamento di tonalità.

Nel terzo caso, il colore di fondo ha una luminescenza più elevata di quello superiore, quindi il gradiente viene percepito come una diminuzione della luminosità, come se si oscurasse.

Questo spiegherebbe perché, anche quando selezioni 2 tonalità posizionate relativamente alla stessa distanza sulla ruota dei colori rispetto a quelle che ti piacciono, il risultato sarebbe percepito in modo diverso.

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

1 - Una combinazione di colori basata su colori analoghi

Colori analoghi sono tre colori affiancati su una ruota cromatica di 12 parti, come giallo-verde, giallo e giallo-arancio. Di solito predomina uno dei tre colori.

2 - Una combinazione di colori basata su colori complementari

I colori complementari sono due colori che si trovano uno di fronte all'altro, come rosso e verde e rosso-viola e giallo-verde. Nell'illustrazione sopra, ci sono diverse variazioni di giallo-verde nelle foglie e diverse variazioni di rosso-viola nell'orchidea. Questi colori opposti creano il massimo contrasto e la massima stabilità.

3 - Una combinazione di colori basata sulla natura

La natura offre un perfetto punto di partenza per l'armonia dei colori. Nell'illustrazione sopra, il rosso giallo e il verde creano un design armonioso, indipendentemente dal fatto che questa combinazione si adatti a una formula tecnica per l'armonia dei colori.

Sto solo aggiungendo alla risposta di AmeliaBR (dovrebbe essere un commento, ma voglio pubblicare un'immagine). Un modo per provare a "spostare" la tua tonalità ma mantenendo la stessa distanza relativa tra i colori iniziale e finale potrebbe essere quello di utilizzare lo strumento Tonalità di Photoshop.

Prendi la prima immagine (quella con il gradiente che ti piace) e aprila in Photoshop. Quindi apri lo strumento Tonalità / Saturazione ( Image->Adjustment->Hue Saturationo Ctr+U) e gioca con il primo cursore (Tonalità). Ciò sposterà la tonalità dell'intera immagine ma manterrà la stessa relazione tra tutte le tonalità esistenti (in particolare la tonalità iniziale e finale delle sfumature). Dal momento che il retro dell'interfaccia è nero (o grigio neutro), il cambiamento di tonalità non la influenzerà.

Se trovi una combinazione che ti piace, accetta le modifiche Tonalità / Saturazione (fai clic OK) e usa lo strumento contagocce (premi I) per selezionare i colori iniziale e finale del gradiente.

In questo esempio ho spostato la tonalità -155 e il gradiente ora passa dal (sempre alla moda) Aquamarine Green al Blue, che è un gradiente fresco e rilassante con echi nautici.

Intendiamoci, la percezione del colore ha una componente molto personale. Ciò che potresti trovare "naturale" per un'altra persona potrebbe essere percepito come un'aberrazione.