Concevoir un design web implique de maîtriser un minimum les notions touchant à l’harmonie des couleurs. Bien que le « bon goût » soit un concept très subjectif fluctuant avec l’époque, la mode, la culture … il semble que l’être humain soit capable de distinguer le beau du laid. Mais qu’est ce que la beauté ? D’après ce que j’en ai compris, le beau pourrait être la perception sensorielle d’une chose qui déclenche un sentiment de contentement, de plaisir. Donc il y a harmonie lorsque une juxtaposition de couleurs produit un plaisir pour l’oeil. Le choix d’une composition de couleurs harmonieuses peut être intuitif ou inspiré de la nature, d’un tableau … Il existe également certaines règles établis par l’homme se basant sur les caractéristiques des couleurs.

Quelques rappels de base

Pour se rafraichir la mémoire et aborder le sujet de l’harmonie des couleurs, voici un certain nombre de définitions issus de Wikipédia qu’il me semble important de connaitre :

La couleur
La couleur est la perception par l’œil d’une ou plusieurs fréquences d’ondes lumineuses, avec une (ou des) amplitude(s) donnée(s).

Pour simplifier je dirais que la couleur n’existe pas sans lumière. Celle-ci est composée de plusieurs ondes. L’oeil humain (le récepteur sensible à ces ondes) génère un message nerveux que le cerveau interprète par une couleur. Notez que l’oeil humain n’est pas sensible à toutes les ondes qui composent la lumière.

Selon la technique utilisée pour produire de la couleur nous distinguerons 2 types de synthèse :

La synthèse additive
La synthèse additive est l’opération consistant à combiner la lumière de plusieurs sources émettrices colorées afin d’obtenir une nouvelle couleur.

En synthèse additive, les couleurs primaires généralement utilisées sont au nombre de trois : le rouge, le vert et le bleu (RVB ou RGB).

• - l’addition de ces trois couleurs donne du blanc.
• - l’absence de couleur donne du noir.

La synthèse additive est le principe de composition des couleurs utilisées notamment dans les écrans cathodiques, les écrans LCD et les vidéoprojecteurs tri-tubes.

La synthèse soustractive
La synthèse soustractive est l’opération consistant à combiner l’effet d’absorption de plusieurs couleurs afin d’en obtenir une nouvelle.

Par exemple, la superposition sur une surface blanche de deux filtres colorés, l’un jaune et l’autre bleu, permet d’obtenir du vert.

Le terme soustractif vient du fait qu’un objet coloré soustrait (absorbe) une partie de la lumière incidente. De fait, une couleur obtenue par synthèse soustractive de plusieurs autres sera nécessairement plus sombre qu’elles.

En synthèse soustractive, les couleurs primaires généralement utilisées sont au nombre de trois : le cyan, le jaune et le magenta

• - l’addition de ces trois couleurs donne du noir.
• - l’absence de couleur est le blanc.

La synthèse soustractive est le principe qui régente le mélange de pigments colorés en peinture (et notamment en aquarelle), en impression trichromique ou quadrichromique, ainsi qu’en impression papier pour la photographie couleur.

En imprimerie, on ajoute le noir aux trois couleurs de base pour plusieurs raisons: économie d’encres (une seule couleur au lieu de trois, et de surcroît l’une des moins chères à fabriquer), amélioration des contrastes d’images et de texte, et pureté du noir. En effet, la qualité du noir composé par mélange des trois couleurs primaires est intimement lié à la pureté des pigments de base, et il est par cette méthode très difficile d’obtenir une noir neutre.

Le cercle chromatique

Un cercle chromatique est une représentation circulaire des couleurs. Celles-ci sont ordonnées comme au sein d’un arc-en-ciel, la fermeture du cercle s’effectuant par une transition du rouge au violet via le magenta.

L’image de gauche nous montre un cercle chromatique du système additif.

L’intérêt du cercle chromatique réside dans ses caractéristiques :

• - les couleurs primaires sont situées à 120° les unes des autres.
• - les couleurs secondaires alternent avec les couleurs primaires et sont situées à 120° les unes des autres.
• - la complémentaire d’une couleur lui est diamétralement opposée sur le cercle.
• - l’apparence du cercle dépend des couleurs primaires choisies.
• - le cercle est indépendant du type de synthèse considéré (additive ou soustractive), seul le rôle des couleurs change.

Les couleurs primaires

Les couleurs primaires sont au nombre de trois. Pour la synthèse additive ce sont le rouge, le vert et le bleu. Pour la synthèse soustractive il s’agit du magenta, du cyan et du jaune.

L’image de gauche nous montre les couleurs primaires d’un cercle chromatique du système additif.

Par couleur primaire on entend couleur faisant partie d’un ensemble qui par combinaison permettent de générer l’ensemble des couleurs perceptible par l’œil humain.

Les couleurs secondaires

Une couleur secondaire est une couleur obtenue par le mélange en quantité égale de deux couleurs primaires.

L’image de gauche nous montre les couleurs secondaires d’un cercle chromatique du système additif. Il s’agit du Magenta, du Cyan et du Jaune. Dans la synthèse soustractive il s’agirait du rouge, du vert et du bleue (qui sont les couleurs primaires du système additif).

Les couleurs tertiaires

Une couleur tertiaire est une couleur obtenue par le mélange en quantité égale d’une couleur primaire et d’une couleur secondaire voisine c’est à dire consécutive sur le cercle chromatique.

L’image de gauche nous montre les couleurs tertiaires d’un cercle chromatique du système additif. Les couleurs tertiaires sont au nombre de six.


Les couleurs complémentaires
Une couleur complémentaire est la couleur opposée à une autre sur le cercle chromatique. On définit deux couleurs comme complémentaires si mélangées ensemble, elle produisent un gris.

Le modèle TSV : Teinte, Saturation, Valeur
Le modèle TSV est un espace colorimétrique, défini en fonction de trois composantes :

- La teinte : c’est le type de couleur ou tonalité chromatique (comme rouge, bleu, jaune…), la valeur varie entre 0 et 360, mais est parfois normalisée en 0–100 %.
Ne pas confondre la “teinte” (la couleur) et le “ton” d’une couleur qui considère celle-ci du point de vue de son intensité lumineuse (valeur) et de son degré de saturation.

- La saturation : c’est la pureté de la couleur, plus la pureté augmente plus la couleur est vive. Plus la saturation baisse plus la couleur est fade et se rapproche du gris. Une couleur est désaturée si elle contient plus ou moins de gris neutre ou de sa couleur complémentaire. La saturation varie entre 0 et 100 %.

- La valeur : c’est la brillance, la luminosité de la couleur, la quantité de lumière transmise par la surface. Plus la valeur augmente, plus la couleur est franche. Plus la valeur diminue, plus la couleur s’assombrit jusqu’au noir. Elle varie entre 0 et 100%.
A noter que deux couleurs pures différentes n’ont pas la même clarté. Le jaune est la couleur la plus clair du cercle chromatique et le violet la plus sombre.

Le modèle TSV est particulièrement utilisé dans les applications graphiques. La Teinte est représentée par une région circulaire; un triangle séparé peut être utilisé pour représenter la Saturation et la Valeur. Typiquement, l’axe vertical du triangle représente la Saturation, alors que l’axe horizontal représente la Valeur. En informatique graphique, il est courant de représenter chaque canal de couleur par un entier entre 0 et 255 plutôt que par un réel entre 0 et 1. Encodé de cette manière, chaque couleur TSV a un équivalent RVB. Pourtant, l’inverse n’est pas vrai. Certaines couleurs RVB n’ont pas d’équivalent TSV. En fait, seulement 1/256e des couleurs RVB sont ‘disponibles’ en TSV, ce qui élimine effectivement un canal de contrôle pour l’utilisateur artiste.

Camaïeu
Un ton est, théoriquement, l’ensemble des couleurs obtenues par toutes les modifications d’une couleur pure que l’on peut réaliser avec des gris neutres (désaturation), du blanc (éclaircissement), du noir (assombrissement). Les différents tons d’une même couleur sont appelés “Camaïeu”. Camaïeu de rouge, de vert … Voir les accords monochromatiques.

Le langage des couleurs

La température des couleurs

La roue chromatique peut être divisée en 2 ensembles distincts (cf image) regroupant d’un côté un groupe de couleurs dites “chaudes” de l’autre un groupe de couleurs dites “froides”

Il semble que notre organisme soit sensible à la teinte des couleurs qui l’entoure. Une étude médicale à par exemple montré que la perception du vert bleuté ralentit la circulation sanguine alors que le rouge orangé l’active.

Il faut en tenir compte, on évitera ainsi d’utiliser le rouge pour un site de thalassothérapie si le message à faire passer est la quiétude et le repos.

Plus généralement :

Les couleurs chaudes suggèrent la proximité, l’énergie, la vivacité.

Les couleurs froides suggèrent l’éloignement, l’apaisement, le calme.

L’effet psychologique et la symbolique

C’est un sujet qui répond d’avantage de la subjectivité que de règles établis. En effet la symbolique des couleurs et les effets psychologiques ou sensations qu’elles provoquent diffèrent selon l’historique personnel des individus, la culture et l’époque.

Cependant des généralités semblent se dégager pour une majorité de personnes appartenant à une même culture dans une époque donnée.

Voici quelques exemples d’interprétation des couleurs qui, je le rappel, ne sont pas des règles absolues.

• - Paint Café (symbolique)
• - Paint Café (psychologie)
• - Dezign Box
• - Yellow Pimento

L’influence des couleurs entre elles

Les couleurs peuvent se faire concurrence entre elles si elles sont utilisées à valeurs ou à surfaces égales dans un design. L’oeil du spectateur peut alors se perdre en sautant d’une couleur à l’autre.

Si l’on souhaite réaliser un design psychédélique pour un événement musical par exemple, en privilégiant l’aspect graphique, ce n’est pas grave. Par contre si vous souhaitez conduire le regard de l’internaute vers des zones importantes de votre design, mieux vaut choisir parmi les couleurs de votre composition celle qui sera dominante (c’est à dire celle qui va couvrir la plus grande surface), celle qui sera tonique (celle qui créera de l’emphase et sera utilisée pour la plus petite surface) et les autres de moindre importance.

Pour éviter la concurrence des couleurs, la couleur dominante sera fortement atténuée soit en la désaturant, soit en modifiant sa valeur (par éclaircissement ou par assombrissement).

La couleur tonique sera utilisée pure et bien saturée.

Les autres couleurs, si il en a, seront moyennement atténuées par désaturation ou en jouant sur la valeur (luminosité).

Harmonie : techniques de base

Je vais, dans ce chapitre, énumérer des techniques qui utilisent la roue chromatique. Le nom des techniques sera traduit en anglais pour que vous puissiez faire le rapprochement avec les libellés utilisés dans les applications graphiques qui parfois sont en anglais. Chaque technique sera accompagnée d’une image illustrant le type de combinaison décrit sur une roue chromatique. Rassurez vous, un chapitre sur les outils vous proposera quelques ressources pour vous aider à réaliser ces types d’harmonies plus facilement. Cependant pour utiliser ces outils au mieux il est important de connaître ces techniques de base.

Notez que par simplification, nous nous basons ici sur une roue chromatique de 12 teintes (3 primaires, 3 secondaires, 6 tertiaires ) pour expliquer les techniques de base. Toutes ces règles sont bien sure transposables sur une roue chromatique complète qui fournit toutes les nuances de teinte. Comme le webdesign s’apprécie généralement sur un écran, j’utiliserai pour mes exemples une roue chromatique de la synthèse additive.

Composition monochromatique (Monochromatic)

Pour obtenir une composition monochromatique il suffit de choisir une teinte unique puis la décliner soit en :

- La désaturant progressivement (ajout progressif de gris neutre).
- En l’éclaircissant progressivement (ajout progressif de blanc).
- L’assombrissant progressivement (ajout progressif de noir).

On peut également combiner désaturation et éclaircissement (ajout de gris neutre + blanc = gris clair) ou assombrissement (ajout de gris neutre + noir = gris foncé), cela aboutit à une composition monochromatique plus contrasté, avec un peu plus de punch.

Les compositions monochromatiques sont aussi appelées “camaïeu”. Elles donnent des contrastes de couleur dit “clair-obscur”

Les compositions monochromatiques permettent des designs sobres et élégants.

Composition analogue double, triple (Analogous)

La composition analogue double (2 teintes) ou triple (3 teintes) est composée de teintes voisines sur la roue chromatique.

Ce type de composition fonctionne généralement bien et est plaisant à regarder. Elles donnent des designs où règne la sérénité, le confort, l’harmonie. On rencontre souvent ce type de composition de couleurs dans la nature.

La composition analogue DOUBLE est composée de deux teintes.

Il existe 3 formules :

- Primaire –> Secondaire , les 2 teintes sont voisines mais séparées par une couleur tertiaire.
Cet accord est souvent utilisé en communication visuelle pour les logos par exemple.

- Primaire -> Tertiaire , les 2 teintes sont directement voisines .

- Secondaire -> Tertiaire , les 2 teintes sont directement voisines .

La composition analogue TRIPLE est composée de trois teintes.

Il existe 5 formules :

- Secondaire –> Primaire <-- Secondaire, les 3 teintes sont voisines mais séparées par une couleur tertiaires.

- Primaire --> Secondaire <-- Primaire , les 3 teintes sont voisines mais séparées par une couleur tertiaires.

- Tertiaire -> Primaire <- Tertiaire , les 3 teintes sont directement voisines.

- Tertiaire -> Secondaire <- Tertiaire , les 3 teintes sont directement voisines.

- Primaire -> Tertiaire <- Secondaire , les 3 teintes sont directement voisines.

Composition complémentaire (Complements)

La composition complémentaire s’obtient en choisissant deux teintes diamétralement opposées sur le cercle chromatique.

L’important contraste entre deux couleurs complémentaires créer un environnement vibrant surtout à pleine saturation. Ce type d’arrangement peut être délicat à manipuler à forte dose, mais fonctionne bien si vous voulez faire ressortir quelque chose. Évitez les couleurs complémentaires pour le texte.

Il existe 2 formules :

- Primaire <> Secondaire (diamétralement opposée)

- Tertiaire <> Tertiaire (diamétralement opposée)

Si vous avez une couleur dominante et une couleur tonique dans votre design, dans ce type de composition, l’une des deux couleurs joue le rôle de dominante et l’autre de tonique.

Composition accords isocèles (Split-complements)

Les compositions accords isocèles sont obtenues en choisissant 3 teintes sur la roue chromatique formant un triangle isocèle. Les teintes qui forment la base sont voisines mais séparées d’une teinte.

Ce type de composition a le même fort contraste visuel que les compositions complémentaires mais avec moins de tension. C’est est un bon choix pour débuter car facile à réaliser.

Il existe 3 formules : (base / base > sommet … du triangle isocèle)

- Tertiaire / Tertiaire > Primaire

- Tertiaire / Tertiaire > Secondaire

- Primaire / Secondaire > Tertiaire

Votre tonique sera la couleur qui forme le sommet du triangle, la dominante l’une des deux autres.

Composition accords équilatéraux (Triadic)

Les compositions accords équilatéraux s’obtiennent comme les isocèles mais le triangle formé est équilatéral. Les 3 teintes sont séparées par 3 autres sur le cercle chromatique.

Ce type de composition à tendance à donner une ambiance assez vibrante même si l’on utilise des versions de teintes désaturées ou éclaircies. Pour réussir l’harmonie d’une composition accord équilatéral les couleurs doivent être soigneusement équilibrées si elles sont utilisées pures.

Il existe 3 formules :

- Primaire / Primaire / Primaire

- Secondaire / Secondaire / Secondaire

- Tertiaire / Tertiaire / Tertiaire

Ces formules fournissent trois teintes, soit :

- Une couleur chaude et deux couleurs froides, la tonique sera alors la couleur chaude, la dominante une des deux couleurs froides.

- Une couleur froide et deux couleurs chaudes, la tonique sera alors la couleur froide, la dominante une des deux couleurs chaudes.

Composition analogue double + 1 complémentaire (Analogous 2 + Complements)

La composition analogue double + 1 complémentaire s’obtient en choisissant 2 teintes voisines et une complémentaire de l’une des deux teintes.

Il existe 6 formules : (-> adjacentes; <> opposées)

- Primaire -> Secondaire <> Primaire

- Secondaire -> Primaire <> Secondaire

- Primaire -> Tertiaire <> Tertiaire

- Tertiaire -> Primaire <> Secondaire

- Secondaire -> Tertiaire <> Tertiaire

- Tertiaire -> Secondaire <> Primaire

Dans ces formules la tonique sera la couleur complémentaire (position 3 de la formule) et la dominante sera la couleur opposée à la complémentaire (position 2 de la formule).

Composition 4 tons en rectangle (Tetradic)

La composition 4 tons en rectangle s’obtient en choisissant 4 teintes sur le cercle chromatique formant un rectangle. Cela nous donne une paire de couleurs complémentaires.

Ce type de composition vous offre beaucoup de possibilités de variation et fonctionne mieux si vous laissez l’une d’entre elle dominer.

Il existe 2 formules :

- Primaire / Primaire / Secondaire / Secondaire

- Tertiaire / Tertiaire / Tertiaire / Tertiaire

Ces formules donnent des compositions de 2 couleurs froides et 2 couleurs chaudes.
La dominante sera l’une des quatres couleurs au choix, la tonique sera la complémentaire de la dominante choisie.

Composition 4 tons en carré (Square)

La composition 4 tons en carré s’obtient en choisissant 4 teintes sur le cercle chromatique formant un carré.

Ce type de composition vous offre beaucoup de possibilités de variation et fonctionne mieux si vous laissez l’une d’entre elle dominer.

Il existe 1 formule :

Primaire / Tertiaire / Secondaire / Tertiaire

La dominante sera l’une des quatres couleurs au choix, la tonique sera la complémentaire de la dominante choisie.

Composition analogue triple + 1 complémentaire (Analogous 3 + Complements)

La composition analogue triple + 1 complémentaire s’obtient en choisissant 4 teintes sur le cercle chromatique. 3 teintes voisines + la complémentaire de la couleur centrale.

Ce type de composition vous offre beaucoup de possibilités de variation et fonctionne mieux si vous laissez l’une d’entre elle dominer.

Il existe 7 formules :

- Tertiaire -> (Primaire <> Secondaire) <- Tertiaire

- Tertiaire -> Primaire -> (Tertiaire <> Tertiaire)

- Primaire -> (Secondaire <> Primaire) <- Tertiaire

- Tertiaire -> Secondaire -> (Tertiaire <> Tertiaire)

- Primaire -> (Tertiaire <> Tertiaire) <- Secondaire

- Secondaire -> Tertiaire -> (Primaire <> Secondaire)

- Primaire -> Tertiaire -> (Secondaire <> Primaire)

La tonique sera la couleur complémentaire et la dominante la couleur opposée à la complémentaire.

Composition zone d’influence d’une couleur primaire

Une composition zone d’influence d’une couleur primaire est un accord de 7 couleurs (1 couleur primaire, 2 couleurs secondaires et 4 couleurs tertiaires). Son emploi est très limité en webdesign car l’utilisation de 4 teintes est souvent un maximum. On l’utilise d’avantage dans la décoration de bâtiments. Cependant il est intéressant de la connaître c’est pourquoi j’en parle rapidement ici.

Sur une roue chromatique simplifiée comme celle que l’on utilise dans cet article, 3 compositions de ce type peuvent être extraites. Pour cela il suffit de prendre une couleur primaire et les trois couleurs adjacentes de part et d’autre de celle-ci. On obtient donc 3 compositions avec une zone d’influence soit du rouge, soit du vert, soit du bleu. (cf image, composition zone d’influence du bleu)

Pour une harmonie réussie, mieux vaut respecter l’éloignement des couleurs par rapport à la primaire.

Utiliser une image

La méthode de la roue chromatique n’est pas la seule pour obtenir une harmonie de couleurs. Si votre client vous propose un logo ou si vous partez d’une image qui aura un poids important dans votre design, vous pourrez vous en inspirer pour en extraire une palette de couleur.

Soit vous utilisez un outil pipette et allez chercher les teintes qui vous plaisent dans l’image, soit vous utilisez un outil en ligne de type Pic2Color qui vous extrait directement la palette de couleur de votre image.

Pour mieux comprendre cette technique, je vous conseil l’article bien illustré de Dave Shea sur le site 24ways.org.

Des outils pour vous aider

Il existe sur le web de nombreux outils qui vous aiderons à composer votre palette de couleur pour vos futurs design.

Roues chromatiques et compositions

• - Infinisedesign.net
• - Snook : pour vérifier contraste entre background et texte
• - Genopal
• - Color Jack

Palettes prêts à l’emploi

• - Daily Color Scheme
• - Kuler d’Adobe
• - Colour Lovers (mon préféré !)

Application Linux

• - Agave Color Schemer

Conclusion

Pour concevoir un design web qui fonctionne, il faut savoir choisir une composition de couleurs harmonieuses afin d’établir une charte graphique agréable à regarder. Mais est ce une condition suffisante ? Non, un design web réussi c’est aussi un design qui aide à transmettre un message, aide l’oeil à trouver l’information, met le contenu en valeur, ne laisse pas votre lecteur indifférent. Soigner le design de votre site c’est aussi soigner votre image, que vous soyez une société, une organisation, une association, un indépendant …

Mes sources

Ouvrages :

• - La couleur et ses accords - Robert Montchaud - Editions Fleurus

Sites web :

• - paintcafe.com
• - tigercolor.com
• - pourpre.com
• - Wikipédia