Roue de la couleur

Cette documentation est archivé et n'est pas maintenu.

Robert Hess
Microsoft Corporation

Principes de base de couleur

Nous savons que ce que nous considérons la lumière « visible » peut être décomposé en un spectre qui va du bleu au rouge dans un arc-en-progressive.







Figure 1. Le spectre de la lumière visible

Nous avons également vu, et peut-être utilisé, une roue de couleur, qui montre comment arriver à une couleur particulière en mélangeant deux ou plusieurs autres couleurs ensemble. La roue de couleur est essentiellement la progression linéaire de la couleur comme vu dans le spectre de couleurs, reliant les deux extrémités ensemble de telle sorte que relie rouge avec pourpre sur l'autre extrémité.

Figure 2. La roue chromatique

Une roue de couleur comprend généralement 12 couleurs distinctes, comme indiqué ici. Alors que des aspects importants de la roue chromatique et la théorie des couleurs sont bien connues des artistes, ils pourraient ne pas être pleinement appréciés par les programmeurs parmi nous, et que le manque de compréhension peuvent les conduire à faire un tas de choses.

Mais si vous avez une imprimante couleur à jet d'encre, prenez un moment pour ouvrir le couvercle et regarder les cartouches. Est-ce que vous voyez rouge / vert / bleu? Nan. Vous voyez probablement quatre fournitures d'encre: cyan, magenta, jaune et noir. Les couleurs sont différentes parce qu'un écran d'ordinateur utilise l'additif de couleur, alors que votre imprimante utilise la couleur soustractive. Le moniteur émet une lumière de couleur, alors que l'encre sur le papier absorbe la couleur de la lumière qu'elle reflète. Toute autre discussion à ce sujet est au-delà de la portée de ce que je veux accomplir avec cet article, mais si vous êtes à la recherche d'un peu plus de lecture, voici quelques liens à vérifier:

Couleurs secondaires

Figure 4. Les couleurs secondaires

Couleurs tertiaires

Figure 5. Les couleurs tertiaires

La dernière étape dans la construction de notre roue chromatique est de trouver une nouvelle fois les couleurs intermédiaires entre les couleurs actuellement remplis sur notre roue. Heureusement, ces couleurs tertiaires sont les mêmes pour l'additif et soustractif mondes. Maintenant que nous avons défini les couleurs que nous utiliserons pour notre roue chromatique 12 points, nous pouvons discuter des relations des couleurs entre elles.

Couleurs Analogie

Figure 6. Les couleurs analogues

Ce sont toutes les couleurs directement à côté d'une couleur donnée. Si vous commencez à l'orange et que vous voulez ses deux couleurs analogues, vous sélectionnez le rouge et le jaune. Un jeu de couleurs qui utilise des couleurs analogues fournit une harmonie et le mélange des couleurs, semblable à ce que l'on trouve dans la nature.

Des couleurs complémentaires

Figure 7. Couleurs complémentaires

Fractionner couleurs complémentaires

Figure 8. couleurs complémentaires Split

Fractionnés couleurs complémentaires peuvent être composées de deux ou trois couleurs. Vous sélectionnez une couleur, trouver sa couleur complémentaire de l'autre côté de la roue de couleur, puis utilisez la couleur ou les couleurs de chaque côté de cette couleur complémentaire.







Triad Couleurs

Figure 9. couleurs Triad

Couleurs chaudes

Figure 10. Les couleurs chaudes

Les couleurs chaudes sont composées des teintes rouges, comme le rouge, orange et jaune. Ils donnent un sentiment de chaleur, de confort, et de l'énergie à la sélection des couleurs. Ils produisent également un résultat visuel qui provoque ces couleurs semblent se déplacer vers le spectateur, et de se démarquer de la page.

Couleurs fraîches

Figure 11. Couleurs fraîches

Des couleurs fraîches viennent des teintes bleu, comme le bleu, le cyan et le vert. Ces couleurs se stabilisent et refroidir le schéma de couleurs. Ils apparaissent également à se retirer du spectateur, de sorte qu'ils sont bons à utiliser pour les fonds de page.

Il est important de noter que vous pourriez trouver ces groupes de couleurs appelés différentes choses dans différents livres, mais si vous comprenez les principes de base, ils vous tous sens.

Cela me amène enfin au concept principal que je veux discuter, ce qui est contraire.

Gonflez le contraste

Le contraste est la différence perçue entre deux couleurs adjacentes. Parce que blanc et noir ne sont pas vraiment des couleurs, ils sont censés représenter le contraste achromatique. Noir et blanc représentent aussi le plus haut niveau de contraste. Les couleurs complémentaires de la roue chromatique représentent un fort contraste chromatique. L'œil humain est plus sensible au contraste achromatique que de contraste chromatique, ce qui explique pourquoi l'algorithme de compression .jpg baissera les informations de couleur avant qu'il laisse tomber l'information en noir et blanc d'une image que vous augmentez le facteur de compression.

Figure 12. blanc au noir: rampe de contraste achromatique

Figure 13. contraste monochromatique rampe en utilisant le bleu

Le contraste est extrêmement important dans la conception Web. Et il y a beaucoup de différentes façons de l'utiliser, tous basés sur les autres concepts de couleur énumérés ci-dessus. Il est clair pour tout le monde que le texte noir sur fond blanc est extrêmement facile de voir, qui fait partie de la raison pour laquelle la plupart des documents imprimés que vous lisez est du texte noir sur un fond blanc. De même, blanc sur noir produit un contraste élevé, mais il est plus difficile à lire parce que le noir est perçu comme étant plus lourd que le blanc et, par conséquent, il serre un peu.

Figure 14. combinaisons de couleurs contraste élevé

Le même genre d'effet se produit avec des couleurs chaudes et froides. Les couleurs chaudes sont perçues comme avançant hors de l'écran un peu, et les couleurs froides se retirent. Cela signifie qu'une couleur chaude / foncée est le mieux pour le texte, tandis qu'une couleur froide / lumière fonctionne le mieux pour l'arrière-plan. Cependant, cette approche est pas tout à fait coupé et séché. Jetons un coup d'oeil à un exemple simple dans lequel nous choisissons deux couleurs contrastées, en utilisant l'un pour l'arrière-plan et l'autre pour le texte.

Figure 15. combinaisons de couleurs complémentaires

Vous remarquerez que les résultats sont assez mauvais. Ces deux couleurs ne se contentent pas de contraste entre eux, ils semblent presque être affrontées. Certainement pas une bonne combinaison. Gardons les couleurs fondamentalement les mêmes, et régler la luminosité / obscurité d'entre eux pour les déplacer encore plus loin en dehors.

Figure 16. combinaisons de couleurs modifiée

Vous pouvez voir que cela est une bien meilleure combinaison, et il illustre l'importance de penser à contraste non seulement dans un sens analytique, mais d'un point de vue visuel.

Une telle utilisation de la couleur et le contraste est peut-être le plus important dans le texte superposant sur les images de fond. L'utilisation de ces notions de contraste, il faut se rappeler que le composant texte de votre page doit assez de contraste fortement avec toutes les couleurs de l'image d'arrière-plan. Par exemple, si vous utilisez simplement un ensemble de couleurs triade décrites ci-dessus, vous aurez trois couleurs nettement contrastées qui se battent pour la page.

Figure 17. Triade combinaison de couleurs; texte sur une image d'arrière-plan

Une meilleure approche consiste à utiliser un ensemble de couleurs complémentaires fractionnés, avec les couleurs analogues pour l'arrière-plan, et la couleur complémentaire du texte. De cette façon, les couleurs de fond se mélangent correctement sans attirer l'attention manifeste à eux-mêmes, et le texte se démarquer.

Figure 18. combinaison de Split de couleur complémentaire; texte sur une image d'arrière-plan

Afficher: Protégé Hérité







Articles Liés