Préambule

J’ai eu, pendant mes études, un professeur de couleurs (et oui un cours à l’année uniquement pour parler des couleurs), un type formidable dont j’ai, hélas, oublié le nom, mais c’est ce que l’on peut appeler; Un Monsieur.

Pourtant, nous étions partis du mauvais pied, imaginez une classe d’une vingtaine de jeunes loups et louves, qui ont passé leur première année avec brio, qui pensent déjà tout savoir sur tout, et surtout qui ne comprennent pas l’intérêt de se taper un cours uniquement pour parler des couleurs.

Bref, imaginez ce vieux monsieur (en plus), qui arrive, nous toise avec un regard torve et nous sort direct : Bonjour je suis « Je me rappelle plus son nom », ces trois premiers mois, je vais les passer à nettoyer la merde que vous avez dans vos têtes, ensuite, et seulement ensuite, quand vous aurez appris à écouter et à apprendre, nous commencerons à travailler.

Trois mois plus tard, il était devenu notre dieu, vous vous en doutez.

Bref, revenons à nos moutons.

La couleur

La couleur, c’est un sujet passionnant, que l’on parle de synthèse additive (lumière), ou soustractive (matière), mais c’est surtout, pour revenir à notre sujet, un élément communiquant fort.

Si vous ne deviez retenir qu’une chose de la couleur, ce serait ceci :

Le Cercle chromatique :

Nous avons :

• les couleurs primaires (cyan (bleu primaire, magenta (rouge primaire) et jaune : P
• les couleurs secondaires : S
• les couleurs tertiaires : T

Je ne vais pas m’étendre sur les couleurs complémentaires ni sur les théories des couleurs contraste, mais sachez qu’à partir de ce cercle chromatique, vous pouvez aisément tester n’importe quelle concordance de couleurs.

Deux autres variations de ce cercle chromatique :

Une version désaturée :

Une version « lavée » appelée le plus souvent « pastel » :

Au passage, merci à je ne sais plus qui, ce cercle chromatique a été réalisé à partir d’un fichier flash vu je ne sais plus où mais si vous le reconnaissez, comme d’habitude je me ferais un plaisir d’insérer l’origine de la source dans ce billet.

Imaginez, le nombre de variations de couleurs possibles, elles sont quasiment infinies, mais vous verrez, vous reviendrez assez rapidement au cercle chromatique de base.

Ajoutez à cela les gris qui vont du « blanc » au « noir ».

On peut de façon très schématique les classer en trois catégories :

• Les gris neutres : simples niveaux de gris du blanc au noir sans autre information de couleur
• les gris chauds : des gris neutres contenant en plus des ajouts de jaune et de magenta (rouge primaire)
• les gris froid : des gris neutres qui contiennent en plus des ajouts de cyan (bleu primaire) et de magenta (rouge primaire)

Je précise, si des fois des puristes passaient par là, je schématise totalement.

Les trois couleurs

Tout comme l’usage des polices , que l’on limite à trois différentes dans un même document, on va essayer de se limiter à trois couleurs principales lorsque l’on construit une mise en page.

Je dis bien trois couleurs principales, il peut y avoir des variantes de ces couleurs (plus pastel, plus sombre, moins saturées…).

La couleur Symbole

La principale, celle qui va identifier le la chromie du site, ce n’est pas forcément celle qui remplit le plus de surface mais plutôt celle que l’on voit le plus.

Je parlais eu début de l’article des « messages » véhiculés par les couleurs, savez vous pourquoi, par exemple, le bleu est utilisé dans tout ce qui touche au conseil, à la formation, et plus généralement aux sites de business?

Parce que le bleu est ce que l’on appelle une couleur concentrique (Moi vers Lui) et donc assimilée à l’information. Raccourci : ce message est bleu, il est informatif.

Je ne vais pas m’étendre sur la symbolique des couleurs, de nombreux sites en parlent, je vous conseille au passage l’excellent pourpre.com.

La couleur d’appoint

En général c’est celle qui va être utilisée pour des aplats, pour délimiter des zones d’information, parfois même sous simple forme d’ombrés ou de cadres.

Cette « couleur » est souvent une variante de gris, neutre, chaud ou froid, à voir pour offrir un minimum de contraste avec votre couleur symbole :

• Si votre couleur « symbole » est « chaude » préférez un gris froid ou neutre
• Si votre couleur « symbole » est « froide » préférez un gris chaud ou neutre

Dernier point, si vous utilisez des ombrés pour vos blocs d’information, essayez si possible d’appliquer la même chose :

• Si votre objet ombré utilise une couleur chaude utilisez un ombré en gris froid
• Si votre objet ombré utilise une couleur froide utilisez un ombré en gris chaud

La couleur contraste

C’est la couleur qui va souligner les informations importantes, celle qui va « détacher » un élément de votre design, par petites touches. Pour l’exemple d’un site internet : les puces des listes à puces, les liens hypertextes (ou les liens au survol).

Pour la choisir, utilisez de préférence le cercle chromatique de cette façon :

C’est une méthode, il en existe beaucoup d’autres. Sur mon exemple, vous utilisez le Magenta comme couleur « contraste » du Cyan, vous pouvez remplacer magenta par rouge et cyan par bleu. Il existe une infinité de rouges et une infinité de bleus. Pour trouver vos bonnes couleurs « contraste » rien ne remplace l’expérimentation.

Points de précision

Si vous regardez bien l’AJblog, vous trouverez quatre couleurs, le vert, le bleu, le gris et le rouge. Ce n’est pas un exemple du fameux : faites ce que je dis, ne faites ce que je fais.

En fait, le bleu et le vert utilisés sont ce que l’on appelle vulgairement des couleurs qui « frottent », c’est à dire peu de contraste entre les deux couleurs, une saturation équivalente, une impression visuelle égale. Elles sont presque à considérer comme une couleur unique. La meilleure façon pour savoir si deux couleurs « frottent » est de faire deux aplats de même taille dans un document, de les coller l’un à l’autre. Si en prenant du recul, vous avez l’impression que la liaison entre les deux blocs devient floue, voir dégradée, c’est que vos couleurs flottent.

N’utilisez JAMAIS de couleur forte pour vos textes, sauf pour souligner certains passages, et encore, n’utilisez que la gamme des gris, mais en contraste suffisant avec le « fond » pour une lisibilité optimale.

L’ajout de couleurs à votre document risque de modifier l’impact visuel de vos « gris typographiques » (voir « les bases : le texte et les blancs »). Vous serez donc peut être obligés de revoir vos réglages.

Je n’ai pas parlé du fond général de votre site, la « couleur » de fond, elle aussi à un impact très fort sur votre document. Ce fond créé une « lumière » ambiante, qui peut énormément modifier l’impression visuelle de vos documents.

Pour exemple, regardez le cercle chromatique de base, mais avec différents fonds :

Si vous avez un visuel fort qui habille votre site, image, illustration, ou simplement votre logo, utilisez ses couleurs pour habiller votre site, uniquement pour une question d’uniformité graphique.

Pour finir (enfin)

Ce second billet se voulait simple à l’origine, désolé de l’avoir rendu peut être moins lisible en utilisant des « gros mots ».

Si vous n’avez aucune idée des couleurs pouvant aller avec votre site ou votre blog, n’hésitez pas à aller voir la « concurrence », vous vous rendrez vite compte qu’il existe des codes couleur bien précis par secteur d’activité, à tel point que les lecteurs sont habitués à identifier le secteur d’un site internet uniquement sur les couleurs utilisées, pensez-y, ce n’est pas une obligation, vous pourrez vous démarquer quand vous vous sentirez assez confiant pour créer vos propres couleurs.

Ou faites appel à un professionnel. ;)

Les articles de la série:

• Quelques notions de mise en page : Les bases, du texte et des blancs
• Quelques notions de mise en page : Les couleurs et les contrastes
• Quelques notions de mise en page : images et couleurs

D’autres sont à venir.

Quelques lectures :

• La synthèse des arts (éd. Denoël-Gonthier) de Wassily Kandinsky
• Art de la couleur (Dessain Et Tolra) Johannes Itten

Quelques sites et outils

• Le Chromafiltre sur Pourpre.com
• un peu de théorie des couleurs
• Couleurs et déficiences de perception et http://www.vischeck.com/vischeck/vischeckURL.php