Théorie des couleurs, 2 : Concepts et terminologie

Suite de notre mini-feuilleton: pour utiliser efficacement les couleurs, il est utile de connaître quelques concepts et la terminologie des couleurs. L'article de Cameron Chapman est illustré de nombreux exemples.

Par

Si vous voulez utiliser la couleur de manière efficace dans vos designs, il vous faut connaître quelques concepts et la terminologie de la théorie des couleurs. Une connaissance approfondie de concepts tels que pureté, luminosité et saturation est fondamentale pour créer vos propres schémas de couleurs. Dans la première partie, nous avons parlé de la signification des couleurs. Ici, nous allons voir comment on peut agir sur une couleur, par exemple en ajoutant du gris, du blanc ou du noir à sa teinte, et l’effet produit sur un design particulier, tout savoir sur les nuances, teintes et tons avec comme toujours de nombreux exemples.

Ce que nous allons voir en détail :

  • Teinte (Hue) : la couleur (bleu, vert, rouge,...).
  • Pureté (Chroma) : la pureté de la couleur (une grande pureté implique qu’il n’y a ni noir, ni blanc, ni gris ajouté).
  • Saturation : une couleur forte ou faible (une couleur saturée étant forte).
  • Luminosité (Value) : une couleur est plus ou moins lumineuse.
  • Tons (Tones) : ils sont créés par l’adjonction de gris, qui rend la couleur plus douce ou plus terne que l’original.
  • Ombres (Shades) : créées en ajoutant du noir, ce qui rend la couleur plus sombre.
  • Nuances (Tints) : créées en ajoutant du blanc, ce qui éclaircit la couleur.

NdT : La Cascade a publié des articles sur l’utilisation de HSL (“Teinte, Saturation, Luminosité”) en CSS et vous pouvez retrouver tous les articles concernant la couleur ici.

Teinte

La teinte (hue en anglais) est le plus basique des termes relatifs à la couleur, il désigne grosso modo la couleur elle-même. Lorsque nous disons bleu, rouge ou vert, nous parlons de teinte. Les teintes que vous utilisez dans votre design transmettent des messages importants à vos utilisateurs. J’en ai parlé dans la première partie de cet article.

Exemples

image
La teinte principale du background et d’une partie de la typographie est le rouge sur ce site de Happy Twitmas

image
L’accumulation de teintes pures donne un caractère ludique à ce design, comme on le voit dans le header et dans d’autres parties du site.

image
Le rouge pur est une teinte très utilisée dans le design web.

image
Mix utilise plusieurs teintes pures dans son header et dans son logo.

image
Le vert dans ses formes les plus pures est moins courant et de ce fait peut ressortir mieux que d’autres couleurs

Pureté

La pureté (ou chroma) renvoie à la pureté de la couleur. Une teinte pure ne contient pas de noir, ni de blanc, ni de gris. L’ajout d’une de ces couleurs réduit sa pureté. La notion de pureté est assez similaire à celle de saturation, mais pas équivalente. La pureté peut être vue comme la luminosité d’une couleur en comparaison du blanc.

Dans le design, évitez d’utiliser des teintes ayant une pureté similaire. Choisissez plutôt des teintes distantes en termes de pureté.

Exemples

image
Le cyan a une pureté élevée et de ce fait contraste bien avec le blanc et le noir.

image
Un autre site proposant un bleu pur, bien que comportant des nuances moins pures.

image
La combinaison de saturations élevées et faibles peut apporter sophistication et élégance.

image
Mieux vaut utiliser les couleurs pures avec modération, comme ici.

image
Les différences de pureté peuvent donner des dégradés visuellement intéressants.

Saturation

La saturation renvoie à la façon dont une teinte apparaît en fonction de la lumière. Pensez à la saturation en termes de teintes faibles vs fortes, ou pâles vs pures.

Dans le design, les couleurs ayant des niveaux de saturation similaires donnent des résultats plus cohérents. Comme avec la pureté, des couleurs aux saturations similaires mais non identiques peuvent avoir un effet détonnant.

Exemples

image
Les niveaux de saturation de plusieurs des teintes utilisées ici sont similaires, ce qui donne une unité au design.

image
La combinaison de couleurs aux niveaux de saturation similaires crée un design doux, accentué par les effets pastel.

image
Ce n’est pas parce que les teintes sont moins saturées qu’elles sont plus claires, comme on le voit ici.

image
Un excellent exemple de la façon dont une teinte saturée utilisée sur un background faiblement saturé peut mettre en relief la première.

image
Un autre exemple de la façon dont l’utilisation de couleurs faiblement saturées peut faire ressortir les éléments hyper saturés.

Luminosité

La luminosité peut aussi être appelée valeur ou clarté, elle renvoie aux notions de clarté et d’obscurité. Les couleurs claires ont une plus grande luminosité. Par exemple, le orange est plus lumineux que le bleu marine ou le violet sombre. Le noir a la plus faible luminosité et le blanc la plus forte.

Lorsque vous appliquez la luminosité à votre design, choisissez plutôt des couleurs ayant des luminosités différentes, en particulier celles avec une forte pureté. Les luminosités contrastées donnent généralement des designs esthétiquement plaisants.

Exemples

image
La forte luminosité du jaune utilisé ici crée un fort contraste avec la faible luminosité du noir et du gris.

image
Ce site utilise des teintes de bleu aux luminosités différentes. Leur contraste donne un aspect visuel attrayant.

image
La combinaison de couleurs ayant une luminosité similaire crée un background énergique et vivant, accentué par le design lui-même.

image
Ici la luminosité du rouge est inférieure à celle du bleu, elle même inférieure à celle du blanc.

image
L’oeil humain est capable de percevoir les différences de luminosité de teintes similaires.

Tons

Les tons sont le résultat de l’ajout de gris à une teinte. Les tons sont généralement plus doux ou plus ternes que les couleurs pures.

Les tons sont parfois plus faciles à utiliser dans le design. Ceux qui contiennent plus de gris peuvent donner un côté vintage. Selon la teinte d’origine, ils peuvent aussi ajouter un aspect élégant ou sophistiqué.

Exemples

image
Les tons peuvent donner un aspect sophistiqué et ajouter quelque chose d’antique ou de vintage.

image
Ce site associe les bleus dans une variété de tons, de nuances et d’ombres.

image
Les tons peuvent être intensifiés par l’ajout de gris tout autour, comme ici.

image
Utilisés dans la navigation et le background comme ici, les tons donnent à ce site un côté vintage et fait-main.

image
Un bel exemple de teinte pure qui ressort sur un background de tons.

image
Certaines couleurs que nous pourrions qualifier de grises sont en réalité des tons d’autres couleurs. Dans cet exemple, le background est un ton bleu comportant beaucoup de gris ajouté.

Ombres

Une ombre est créée par l’ajout de noir à la teinte, ce qui la rend plus sombre.

Dans le design, des ombres très foncées sont parfois utilisées à la place du noir et peuvent servir de couleur neutre. L’association des ombres et des nuances fonctionne bien pour éviter des designs trop sombres et lourds.

Exemples

image
Le site de Jonathan Moore emploie diverses ombres de violet en background (et quelques nuances ailleurs).

image
L’utilisation d’ombres multiples fonctionne bien, tant qu’on garantit un contraste suffisant.

image
Une association efficace d’ombres et de nuances, en particulier dans le header.

image
Un autre exemple de background comprenant des ombres et des nuances, dans une texture pleine de dégradés.

image
C’est l’association d’ombres et de textures qui donne de l’intérêt à ce design.

Nuance

Une nuance est formée par l’adjonction de blanc à une teinte, ce qui a pour effet de l’éclaircir. Très légères, elles sont parfois appelées pastels, mais toute teinte pure additionnée de blanc est une nuance. Le mot est souvent utilisé de façon incorrecte pour décrire un ton ou une ombre.

Elles sont souvent utilisées pour créer des designs féminins ou plus clairs. Les pastels sont utilisés en particulier pour donner ce côté plus féminin. Elles fonctionnent bien aussi avec les designs vintage et elles sont très courantes dans les sites s’adressant aux parents de bébés et de jeunes enfants.

Exemples

image
Le site de Caio Cardoso utilise toute une gamme de nuances vertes pour son background et pour d’autres éléments.

image
La nuance bleue du site de Fernando Silanes lui donne un look très doux et sophistiqué.

image
Les nuances bleues sont souvent utilisées pour le ciel et pour d’autres motifs naturels.

image
Les nuances sont la base des designs pastels.

image
Des nuances associées pour créer un effet sophistiqué de dégradé.

Conclusion

Vous n’êtes pas obligés de retenir tous ces termes techniques, mais il est vraiment utile de se sentir à l’aise avec les concepts, notamment pour bien approfondir la 3ème partie où nous créerons nos propres schémas de couleurs. Voici donc une petite antisèche :

  • Teinte (Hue) : la couleur (bleu, vert, rouge,...).
  • Pureté (Chroma) : la pureté de la couleur (une grande pureté implique qu’il n’y a ni noir, ni blanc, ni gris ajouté).
  • Saturation : une couleur forte ou faible (une couleur saturée étant forte).
  • Luminosité (Value) : une couleur est plus ou moins lumineuse.
  • Tons (Tones) : ils sont créés par l’adjonction de gris, qui rend la couleur plus douce ou plus terne que l’original.
  • Ombres (Shades) : créées en ajoutant du noir, ce qui rend la couleur plus sombre.
  • Nuances (Tints) : créées en ajoutant du blanc, ce qui éclaircit la couleur.

La série de trois articles :


Intéressé par le design ? Sur la Cascade, retrouvez des articles et ressources.

Tous les articles sur la couleur dans La Cascade.


Ressources complémentaires en anglais

Ressources complémentaires en français


original paru le dans Smashing Magazine.

Sur l’auteur : est designer web et graphique, elle écrit pour de nombreux blog, y compris le sien, Cameron Chapman On Writing. Elle est aussi l’auteur de The Smashing Idea Book: From Inspiration to Application. On peut la suivre sur Twitter et sur Google+.

Traduit avec l’aimable autorisation de Smashing Magazine et de l’auteur.
Copyright Smashing Magazine © 2010.