Pourquoi ce dégradé de couleurs est-il tellement plus attractif que les autres?

J'ai joué avec des dégradés sur un site que je suis en train de développer, et je suis vraiment intéressé par la psychologie ou une autre signification derrière pourquoi certaines couleurs semblent plus attrayantes que d'autres.

Voici le site en ce moment:

Les dégradés y semblent assez naturels pour la conception. Mais si je commence à mixer et à assortir, je me retrouve avec ceci:

Je n'arrive pas à trouver un autre dégradé décent qui semble "naturel". Je me demande quelle est la psychologie derrière la façon dont nous percevons ces mélanges de couleurs ... existe-t-il une sorte de règle pour trouver des couleurs qui vont bien ensemble dans un dégradé? J'imagine que cela dépend du genre de sensation que vous recherchez. J'apprécie toutes les contributions!

La principale différence entre l'exemple initial et vos expériences est que l'original ne couvre pas un changement de teinte presque aussi radical.

Passer du jaune doré au magenta / rose représente environ 1/6 de tour sur la roue chromatique. En revanche, vos expériences (orange-rouge à bleu-violet, bleu-violet à jaune-vert et cyan à bleu-violet) sont toutes de plus de 1/4 de tour.

Ce changement n'est pas perçu comme un seul changement de couleur, mais plutôt comme une progression à travers plusieurs couleurs. Parce que votre dégradé est plutôt condensé dans vos en-têtes, cela apparaît comme un changement assez net et peut expliquer pourquoi il ne vous semble pas "naturel".

Si vous souhaitez avoir une couleur différente pour vos principaux blocs de couleur "destination", choisissez une couleur voisine pour le début du dégradé. Par exemple, pour le bleu-violet comme point final, choisissez un bleu profond ou un magenta comme point de départ. Pour le jaune-vert comme point final, commencez par le vert vif ou le rouge.

Bien sûr, ceux-ci vous donneront toujours des "ambiances" différentes selon l'humeur des couleurs impliquées - le bleu-violet est une couleur beaucoup plus froide et plus calme que le rose dans l'original. Mais au moins, les dégradés devraient être un peu plus lisses.

Puisque vous demandez "pourquoi sont-ils perçus différemment", voici une autre chose (très geek) à considérer: la luminescence perçue d'une couleur RVB. C'est difficile à appliquer, alors prenez ma réponse presque comme une anecdote:)

La valeur de luminescence d'une couleur de indique à quel point vous l'éclairez. Si la couleur était une ampoule, une couleur à faible luminescence serait perçue comme faible (ampoule 40W), tandis qu'une couleur à forte luminescence serait perçue comme très lumineuse (ampoule 100W).

Les couleurs RVB sont en effet affichées à l'aide de petites "ampoules". Les écrans sont constitués de minuscules "ampoules", trois pour chaque pixel: R (ed), G (reen) et B (lue). Les valeurs spécifiques R, G et B d'une couleur indiquent la luminosité de chaque minuscule ampoule pour créer l'illusion de cette couleur. Par exemple, la couleur orange RVB (255, 100, 0) est créée en tournant l'ampoule rouge à sa puissance maximale (255), rendant l'ampoule verte semi-sombre (100) et en éteignant l'ampoule bleue (0).

Voici une illustration montrant certaines couleurs et la façon dont "lumineux" chacun des composants RVB doit être fait pour créer l'illusion de la couleur. Les petits points sous chaque couleur indiquent à quel point le composant est sombre ou brillant.

Comme vous pouvez le voir sur l'illustration, pour créer du blanc, par exemple, vous tournez les 3 composants au maximum (255). Cette combinaison des 3 minuscules "ampoules" est perçue par l'œil comme blanc (expliquant pourquoi serait une grande digression). Pour créer du noir, vous les désactivez tous. C'est simple: pas de lumière, pas de couleur.

La luminescence de chaque couleur est calculée en ajoutant "la luminosité" de chacun des 3 composants. Le blanc serait la couleur avec la luminescence la plus élevée, car les 3 composants sont tournés à sa valeur maximale. Le noir serait celui qui aurait le plus bas. Le jaune aurait une luminescence plus élevée que le vert car pour rendre le jaune, vous avez besoin de 2 composants à son maximum, mais pour le vert, vous n'en avez besoin que d'un. Donc, plus ou moins on pourrait dire que

L = R + G + B

C'est un peu plus compliqué cependant. En regardant l'illustration, vous remarquerez que la composante verte semble être plus lumineuse. Il est, en fait, perçu par l'œil comme le plus brillant. Le bleu, de l'autre côté, est perçu comme très sombre. La formule exacte pour calculer la luminescence en tient compte.

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

Voici à nouveau l'illustration, avec la luminescence calculée pour chaque couleur.

Vous remarquerez que, comme votre œil aurait pu vous le dire, le jaune est plus lumineux que l'orange mais l'orange est plus ou moins aussi lumineux que le magenta.

Maintenant, j'ai pris les couleurs de deux de vos palettes originales et calculé leur luminescence.

Dans le premier cas, celui que vous aimez, vous remarquerez que la luminescence de la première couleur, en bas est plus faible (125) que celle de la deuxième couleur, en haut (200). Le gradient est alors perçu comme une augmentation de la luminosité, comme s’il s’allumait.

Dans le deuxième cas, il n'y a pas beaucoup de différence, donc le gradient est perçu comme un changement de teinte.

Dans le troisième cas, la couleur du bas a une luminescence plus élevée que la couleur du haut, de sorte que le gradient est perçu comme une diminution de la luminosité, comme s'il s'agissait d'une atténuation.

Cela expliquerait pourquoi, même lorsque vous sélectionnez 2 teintes placées relativement à la même distance les unes des autres sur la roue chromatique que celles que vous aimez, le résultat serait perçu différemment.

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

1 - Un schéma de couleurs basé sur des couleurs analogues

Les couleurs analogues sont trois couleurs qui sont côte à côte sur une roue chromatique en 12 parties, comme le jaune-vert, le jaune et le jaune-orange. Habituellement, l'une des trois couleurs prédomine.

2 - Une palette de couleurs basée sur des couleurs complémentaires

Les couleurs complémentaires sont deux couleurs qui sont directement opposées, comme le rouge et le vert et le rouge-violet et le jaune-vert. Dans l'illustration ci-dessus, il existe plusieurs variations de jaune-vert dans les feuilles et plusieurs variantes de rouge-violet dans l'orchidée. Ces couleurs opposées créent un contraste maximal et une stabilité maximale.

3 - Un jeu de couleurs basé sur la nature

La nature offre un point de départ parfait pour l'harmonie des couleurs. Dans l'illustration ci-dessus, le jaune rouge et le vert créent un design harmonieux, que cette combinaison s'intègre ou non dans une formule technique pour l'harmonie des couleurs.

Ajout juste à la réponse d'AmeliaBR (devrait être un commentaire, mais je veux poster une image). Une façon d'essayer de «déplacer» votre teinte tout en conservant la même distance relative entre les couleurs de début et de fin pourrait être d'utiliser l'outil de teinte de Photoshop.

Prenez la première image (celle avec le dégradé que vous aimez) et ouvrez-la dans Photoshop. Ouvrez ensuite l'outil Teinte / Saturation ( Image->Adjustment->Hue Saturationou Ctr+U) et jouez avec le premier curseur (Teinte). Cela changera la teinte de l'image entière mais gardera la même relation entre toutes les teintes existantes (en particulier la teinte de début et la fin de vos dégradés). Étant donné que l'arrière de votre interface est noir (ou gris neutre), le changement de teinte ne l'affectera pas.

Si vous trouvez une combinaison que vous aimez, acceptez simplement les changements de teinte / saturation (cliquez OK) et en utilisant l'outil pipette (appuyez I), choisissez les couleurs de début et de fin du dégradé.

Dans cet exemple, j'ai changé la teinte de -155 et le dégradé passe maintenant du vert aigue-marine (toujours à la mode) au bleu, qui est un dégradé cool et apaisant avec des échos nautiques.

Attention, la perception des couleurs a une composante très personnelle. Ce que vous pourriez trouver «naturel» pour une autre personne pourrait être perçu comme une aberration.