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

24

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:

Connexion au site d'origine Hub principal du site d'origine

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

Tentative de gradient différente Tentative de gradient différente Tentative de gradient différente

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!

Hayden McAfee
la source
2
Il s'agit d'une question purement subjective et basée sur l'opinion. Ce n'est pas parce que vous pensez que certains gradients sont meilleurs que cela signifie que quelqu'un d'autre le fera.
Scott
6
Je suis d'accord avec Scott et j'irai jusqu'à répondre "Pourquoi ont-ils l'air bien?" avec "Qui dit qu'ils ont l'air bien?". Mais c'est subjectif. Mon commentaire objectif est: je vous garantis que vous évaluez les couleurs dans le contexte de l'ensemble de l'écran qui comprend la bordure de la fenêtre vert clair. Cette couleur à elle seule vous préjugera de certains choix de couleurs dans la fenêtre.
horatio
Très bons points sur la peau du navigateur et la couleur bleue. Je voterais positivement si j'avais le représentant! Je vais commencer à les regarder en mode plein écran pour éviter ce biais.
Hayden McAfee du
Quelque chose que j'ai remarqué aujourd'hui. Tous ces gradients sont possibles avec différentes variations de paires LAB lors de la rotation le long de A. Pour ceux qui ont Photoshop, allez dans le sélecteur de couleurs, cochez la radiobox par ala droite et jouez avec le curseur vertical de la palette. La plupart (toutes?) Des combinaisons notées ici se trouvent aux différentes valeurs de l' Aaxe. Je ne sais pas si cela a un soutien scientifique, mais ce n'était qu'une observation.
Qix

Réponses:

34

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.

Roue chromatique de teintes saturées

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.

AmeliaBR
la source
J'ai calculé le décalage de teinte pour les deux couleurs d'origine, et suis sorti avec une valeur de 96 (sur 360 valeurs de teinte possibles). Donc environ un quart de tour autour de la roue chromatique. J'ai commencé à trouver d'autres valeurs de couleurs avec la même différence, et les valeurs semblaient toujours étranges, bien que plus naturelles. Pardonnez ma méconnaissance des couleurs et autres, mais pouvez-vous penser à une raison particulière pour cela? Ce ne sont peut-être que des couleurs d'une humeur différente. i.imgur.com/utU1Oex.png
Hayden McAfee
Dans ce cas, mon sentiment est qu'il ne s'agit pas tant du dégradé que de la couleur finale; le vert vif est assez choquant. Comparez-le à la version du test de @ cockypup, qui est un vert beaucoup plus doux (moins saturé / brillant). Il est beaucoup plus difficile de quantifier l'ambiance des couleurs, mais en général, les couleurs moins saturées ou secondaires sont un peu plus calmes que les rouges et les verts vifs. Cela devient très subjectif, mais il existe de nombreuses ressources, dont beaucoup avec des exemples de bonnes combinaisons de couleurs.
AmeliaBR
4
Voici une autre chose à considérer: le contraste. Le jaune est la couleur la plus brillante, ayant son contraste maximum contre le noir. Dans votre 1er exemple, le jaune n'est que le haut de votre dégradé. Ça ne dépasse pas. Il "se sent" presque comme un point culminant au sommet. Il aide à déplacer l'œil du bas vers le haut du dégradé. Dans votre troisième exemple, le jaune est la couleur principale du dégradé. Le corps du dégradé ressort. Le sommet du gradient, qui est culturellement lu comme la valeur maximale, semble moins important que le corps. L'œil se bat entre haut et bas. Cela pourrait le rendre moins naturel.
cockypup
29

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.

entrez la description de l'image ici

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.

entrez la description de l'image ici

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.

entrez la description de l'image ici

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.

cockypup
la source
Réponse fantastique! Merci pour l'explication claire; semble que ma réponse est vraiment la combinaison de ces réponses.
Hayden McAfee du
C'est une réponse incroyable. Je suis sûr que cela combiné à la réponse de Hayden peut entraîner des résultats impressionnants.
Qix
2
Notez que cela est quelque peu compliqué par l'affichage gamma. Pour obtenir une valeur de luminescence précise pour une couleur RVB d'affichage, vous devez d'abord appliquer une correction gamma pour convertir les valeurs R / G / B en un espace colorimétrique linéaire avant de les faire la moyenne à l'aide de votre formule. Pour un gamma d'affichage typique de 2,2, la formule correcte est donc L = (0,2126 R ^ 2,2 + 0,7152 G ^ 2,2 + 0,0722 B ^ 2,2) ^ (1 / 2,2).
Ilmari Karonen
4

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.

user3437670
la source
1) Vert foncé à jaune clair. Comme une image en niveaux de gris teintée. 2) Rouge v / s Vert printemps / Cyan. Orange v / s Azure. Indigo / Violet vs jaune. L'un des deux doit être moins saturé que l'autre, pour un contraste supplémentaire. 3) Remarquez comment le rouge est plus foncé et plus saturé que la combinaison vert-jaune, qui est également un dégradé du vert foncé au jaune citron clair.
Locoluis
3

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.

entrez la description de l'image ici

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.

cockypup
la source
Je vois, c'est une bonne façon de l'aborder. Je devrais peut-être suivre des cours de théorie des couleurs pour avoir une meilleure idée de la façon dont certaines couleurs sont perçues en général!
Hayden McAfee du