Tout savoir sur les couleurs : la théorie, les outils…

Palette de couleurs

Bien utilisées, les couleurs d’un site internet peuvent aider à faire passer un message, à appuyer du contenu, mal utilisées elles peuvent ruiner une page. Il est donc nécessaire de savoir un minimum où l’on met les pieds pour éviter la faute d’accord ou pour optimiser ses résultats. Que vous soyez designer  ou développeur, je vous propose de reprendre les bases du travail sur les couleurs pour découvrir comment on construit une palette. Je vous présenterai ensuite deux outils qui vous permettront de créer votre propre palette en quelques clics, pour finir sur un rappel de la signification des couleurs, afin que votre univers graphique colle à votre univers, tout court.

Palette de couleurs

Les couleurs : une sombre histoire de spectre et de cercle

Avant de choisir quelles couleurs vont accompagner au mieux votre message, laissez moi vous expliquer quelques bases à propos du cercle chromatique et de son utilisation.
C’est à la fin du 17ème siècle que Sir Isaac Newton découvre que la lumière blanche peut être décomposée en rayons multicolores puis recomposée en lumière blanche grâce à l’utilisation de prismes. Il décide d’organiser la gamme des couleurs obtenues grâce à un prisme, appelée spectre chromatique, sous la forme d’une roue comportant 7 couleurs principales et dans laquelle le rouge et le violet qui se trouvent à chaque extrémité du spectre des couleurs (infrarouge, ultra-violet, ça vous dit quelque chose ?) se retrouvent côte à côte. Le cercle chromatique était né.
Nous allons travailler un peu sur cette roue chromatique pour catégoriser les couleurs.

separateur

La synthèse des couleurs

Il existe deux façons de combiner les couleurs entre elles pour en créer une nouvelle : la synthèse par addition et la synthèse par soustraction.
La synthèse additive est utilisée lorsque l’on travaille sur des sources lumineuses, comme par exemple un écran. L’addition des couleurs primaires permet d’obtenir de la lumière blanche. C’est ce type de synthèse que nous allons utiliser pour définir nos couleurs primaires, secondaires et tertiaires.
Lorsqu’il s’agit de corps opaques qui, lorsqu’ils sont éclairés, réflechissent une partie de la lumière et absorbent le reste, il s’agit de synthèse soustractive : une couleur est obtenue en enlevant une partie de la lumière blanche. Vous pouvez retrouver ce type de synthèse pour la peinture de vos murs ou même vos cartouches d’imprimante. Nous n’allons pas développer ce sujet, alors sachez seulement que les couleurs primaires de la synthèse par soustraction sont le cyan, le magenta et le jaune, qui sont aussi les couleurs secondaires dans le cadre de la synthèse additive. Voyons cela de plus près.

Les couleurs primaires

Dans le cas de la synthèse par addition, les trois couleurs primaires sont le rouge, le vert, et le bleu, si vous vous demandez depuis des années pourquoi RVB, ou RGB (red, green, blue) vous avez enfin votre réponse. Comme nous l’avons vu plus tôt, si on les supperpose toutes les 3, on obtient un blanc pur. Dans le cercle chromatique, elles sont séparées des autres par un angle de 120° (360° / 3, jusque là c’est simple), nous n’irons pas jusqu’à faire des calculs d’angles nous même, mais savoir cela vous permettra de comprendre comment fonctionnent les outils dont je vais vous parler ensuite.

couleurs primaires

Les couleurs primaires : rouge, vert, bleu

Les couleurs secondaires

Elles sont obtenues en additionnant les couleurs primaires :
rouge + vert = jaune
vert + bleu = cyan
bleu + rouge = magenta
Sur le disque chromatique, chacune des couleurs secondaires se trouve à mi-chemin entre les couleurs primaire qui la composent, en formant un angle de 60° à chaque fois (120° / 2).

couleurs secondaires

Les couleurs secondaires : cyan, magenta, jaune

Les couleurs tertiaires

En mélangeant une couleur primaire et une couleur secondaire, vous obtiendrez une couleur tertiaire. Par exemple vert + jaune = jaune-vert. Alors qu’on avait 3 couleurs primaires et 3 couleurs secondaires, vous remarquerez qu’il existe 6 couleurs tertiaires.

couleurs tertiaires

Les 6 couleurs tertiaires

Les couleurs chaudes et froides

Parmi toutes ces couleurs, on fait la distinction entre les couleurs dites chaudes et celles dites froides. Cette distinction est une métaphore visuelle utilisée pour décrire le sentiment renvoyé par une couleur. Les couleurs froides, dans les teintes du vert au violet en passant par le bleu sont les couleurs, au choix, du crépuscule et/ou de l’eau qui donnent un sentiment de froid. Les couleurs chaudes quant à elles se retrouvent dans le paysage d’une journée ensoleillé : il s’agit des teintes allant du jaune au pourpre, en passant par l’orange et le rouge.

Couleurs chaudes et couleurs froides

Couleurs chaudes à gauche, couleurs froides à droite

Comme vous pouvez le voir ci-dessus, il est difficile de séparer le cercle chromatique en 2 pour déterminer la frontière entre couleurs chaudes et couleurs froides : les extrêmes se rejoignent et se confondent.

Les codes html des couleurs

Bien sûr il s’agit des couleurs pures et vous utiliserez sans doute des teintes un peu moins marquées, mais nous en sommes aux bases et je ne pouvais pas vous donner ces explications sur les couleurs sans vous en fournir les valeurs héxadécimales et le nom correspondant en html quand il existe (c’est à dire pour les couleurs primaires et secondaires).

Valeur Type Couleur html Froide/Chaude ?
Rouge #ff0000 Primaire red Chaude
Orange #ff8000 Tertiaire Chaude
Jaune #ffff00 Secondaire yellow Chaude
Jaune-Vert #80ff00 Tertiaire Froide
Vert #00ff00 Primaire lime Froide
Menthe #00ff80 Tertiaire Froide
Cyan #00ffff Secondaire cyan Froide
Bleu roi #0080ff Tertiaire Froide
Bleu #0000ff Primaire blue Froide
Violet #8000ff Tertiaire Chaude
Magenta #ff00ff Secondaire magenta Chaude
Rose vif #ff0080 Tertiaire Chaude
Noir #000000 black
Blanc #ffffff white

Sachez que, si n’importe quel code hexadécimal est possible, la norme html définit 216 couleurs dites «web safe» que vous pouvez retrouver sur http://www.w3schools.com/html/html_colorvalues.asp

Les associations de couleurs : comment choisir sa palette ?

Une couleur c’est bien, mais deux, ou 3, ou 4 ça peut être bien aussi non ? Généralement, hormis dans le cas du flat design, on n’utilise pas plus de 4 couleurs sur un site internet afin de ne pas dérouter les internautes. Voici les différente façons d’associer vos couleurs.

La palette monochrome

Alors oui, mais non. Finalement on va commencer ce chapitre par une non association, puisque la palette monochrome utilise une seule couleur et ne joue que sur les variations de luminosité et de saturation. C’est le choix que j’ai fait sur ce blog parce que cette palette est assez facile à mettre en oeuvre et que le résultat est élégant. Malheureusement, il est assez difficile de faire ressortir un élément du lot, c’est pourquoi cette palette s’adapte bien aux sites éditoriaux, où l’on ne cherche pas à attirer l’internaute vers un endroit précis.

Palette monochrome

Palette monochrome

Les couleurs complémentaires

La définition de deux couleurs complémentaires est assez obscure : il s’agit de deux couleurs dont le mélange annule la perception de couleur. Pour faire plus simple, il s’agit de deux couleurs disposées face à face dans le cercle chromatique. Vous pouvez constater sur le disque chromatique ci-dessous que si vous tracez une ligne droite reliant deux couleurs complémentaires, vous passerez obligatoirement par le centre, obtenant ainsi un gris neutre.
Au fait, quelle est la différence entre cercle chromatique et disque chromatique ? Le disque est plein, le cercle n’est en théorie qu’une ligne. L’effet de contraste est saisissant puisqu’une couleur chaude répond à une couleur froide, cependant il est difficile d’avoir une harmonie entre deux couleurs complémentaires. Certains site e-commerce utilisent une palette monochrome et mettent leurs call to action (comme le bouton d’ajout au panier) dans une couleur complémentaire à celle de la palette pour qu’ils se voient bien.

Couleurs complémentaires

Couleurs complémentaires

Les couleurs triadiques

Reprenons le fonctionnement des couleurs primaires pour définir une palette de couleurs triadiques : il s’agit de l’association de 3 couleurs équidistantes sur le disque chromatique. Pour obtenir un effet dynamique il faut veiller à choisir sa triade de façon à ce qu’une seule des 3 couleurs domine les 2 autres.

Couleurs triadiques

Couleurs triadiques

Les couleurs tétradiques

Appelées aussi couleurs double complémentaires il s’agit, comme vous l’avez deviné, de l’association de 2 paires de couleurs complémentaires, qui permet de créer des nuances plus subtiles tout en gardant le dynamisme de l’association par triade. Comme cette palette est aussi la plus difficile à harmoniser, il est déconseillé d’utiliser des couleurs primaires ou même des couleurs pures sans jouer sur la saturation ou la luminosité.

Couleurs tetradiques

Couleurs tétradiques

Les couleurs analogues

Il s’agit d’élargir une palette monochrome en ajoutant une des couleurs situées juste à côté dans le disque chromatique. Les nuances sont plus subtiles que lors de l’utilisation d’une palette monochrome mais les limites sont les mêmes, à savoir qu’il est difficile de mettre un élément en avant, par manque de contraste. On retrouve les couleurs analogues sur des sites où l’on utilise beaucoup d’éléments on/off, coché/non coché… La palette de base est monochrome et une couleur analogue aux éléments cliquables est utilisée pour faire ressortir la différence d’état des éléments.

Couleurs analogues

Couleurs analogues

Quelques outils pour créer une palette de couleur

Nous venons de voir qu’une palette de couleur est assez difficile à composer. Mais ne vous en faites pas, il y a des outils pour nous aider dans notre tâche. N’étant pas graphiste moi-même je ne saurais que vous conseiller des les tester, voire de les utiliser au quotidien si vous ne l’êtes pas non plus. Voici deux exemples d’outils qui pourront vous simplifier la vie

Adobe Kuler

Si vous n’êtes pas un codeur dans l’âme mais que vous êtes arrivés dans le web par le côté graphisme, la qualité des produits Adobe n’est plus à vous démontrer. Si vous débutez dans cet univers vous serez probablement séduits par la simplicité d’utilisation de ce service. Rendez-vous sur https://kuler.adobe.com pour créer votre palette en quelques clics : sélectionnez la façon dont vous voulez associer les couleurs (complémentaires, monochrome…) et déplacez les points sur le cercle pour créer la palette qui vous conviendra. Le seul bémol est que vous aurez besoin d’un ID Adobe pour enregistrer votre palette, ou d’utiliser un outil de type « color picker » pour recopier les valeurs générées.

Adobe Kuler : générateur de palette de couleur

Capture d’écran du service Adobe Kuler

Color Scheme Designer

Finalement pas plus compliqué à utiliser que le site d’Adobe, Color Scheme designer (accessible à l’adresse http://colorschemedesigner.com/csd-3.5/) est simplement parfait : vous commencez par sélectionner votre type d’association et vous déplacez votre couleur dominante sur la roue chromatique pour obtenir une première version de votre palette, puis vous passez à l’onglet « Adjust scheme » pour jouer avec la luminosité et les contrastes, et vous pouvez accéder à toutes les valeurs de votre palette dans le 3° onglet « Color list ». Color Scheme Designer peut aussi vous proposer un exemple de page créée avec votre palette, générer une palette aléatoirement… tout un tas de fonctionnalités que je vous invite à découvrir par vous-même en attendant que je rédige peut-être un article complet à ce sujet (si cela vous intéresse faites le moi savoir en commentaires).

Color Scheme Designer : création de palette de couleur en ligne

Capture d’écran du site Color Scheme Designer

Eclairage sur la signification des couleurs

Pour clore cet article, je ne pouvais pas ne pas aborder la signification des couleurs. Chacun sait que les couleurs appellent inconsciement des sensations et nous mettent dans des dispositions particulières. Il est donc indispensable que vous utilisiez les bonnes couleurs en fonction du message que vous voulez véhiculer à travers votre site, de l’univers de produits que propose votre boutique… Attention, vous devez avoir conscience que la perception que nous avons des couleurs est façonnée par notre société occidentale, alors ce qui va suivre ne concerne pas les autres cultures.

  • Marron : c’est à ma connaissance la seule couleur qui n’a aucune signification négative. Tout comme la terre qu’il symbolise, le marron apporte chaleur, confort au design ;
  • Noir : c’est par essence une couleur négative, qui rappelle la nuit, la mort  et toutes sorte de joyeusetés du genre. Mais le noir peut aussi être utilisé pour signifier la puissance (celle d’une panthère par exemple) éventuellement associé avec un peu de rouge ou la sophistication, auquel cas le noir pourra éventuellement être rehaussé d’une touche d’or ;
  • Gris : quoi de plus triste que le gris ? En évoquant cette non-couleur, on pense immédiatement à un ciel nuageux et à la tristesse. La perception positive du gris évoque la sobriété ou la stabilité ;
  • Bleu : c’est l’une des des couleurs préférée des occidentaux. Dans ses teintes claires, il évoque le rêve, la fraîcheur. Dans ses teintes plus sombres, le bleu inspire la confiance, la sagesse. La signification négative du bleu est la mélancolie ;
  • Rouge : le rouge est la couleur la plus passionnée de toutes. Il évoque à la fois l’amour et la haine, l’énergie, le danger, le triomphe… C’est une des couleurs les plus simples à associer avec d’autres ;
  • Violet : C’est une couleur de rêve qui évoque à la fois la paix, et la délicatesse, mais aussi la solitude ou la mélancolie ;
  • Pourpre : pendant des années, le velours pourpre a été le symbole du luxe et de l’opulence, il est donc logique que cette couleur soit utilisée pour illustrer le « haut de gamme ». Revers de la médaille, le pourpre est aussi une couleur macabre, associée à une certaine idée de la mort et au surnaturel ;
  • Orange : certainement grâce au fruit du même nom, l’orange est associé au dynamisme. Cette couleur symbolise la créativité ou la faculté communication. Néanmoins l’orange est une couleur agressive qui doit être utilisée avec parcimonie et elle peut donner une image vieillote, à cause de sa grande utilisation dans les designs des années 60 ;
  • Vert : Couleur par défaut de tous les sites traitant du bien-être et du bio (il paraît que ça évoque la nature), le vert symbolise aussi l’espoir ou la chance, mais aussi bien la malchance ;
  • Jaune : C’est la couleur la plus joyeuse de toutes, elle évoque le bonheur, la convivialité, la fête… Mais si le jaune est une couleur stimulante, elle peut aussi symboliser le mensonge ou la tromperie ;
  • Blanc : dernière couleur de cette liste, mais non des moindres, le blanc est la couleur de la pureté et de l’innocence. Le blanc évoque une autre idée de l’élégance, moins tapageuse que le noir.

separateurSi vous êtes arrivé(e)s jusque là, vous avez maintenant toutes les bases pour choisir les couleurs de vos futurs sites (ou de tout autre support de communication) en toute connaissance de cause. Il vous reste à me dire si vous êtes intéressé(e)s par un article à propos de Color Scheme Designer et bien entendu à partager vos astuces et vos précisions dans les commentaires ci-dessous.


Sources :

Le cercle chromatique de Newton: www.profil-couleur.com/lc/003-couleur-newton.php
La signification des couleurs: http://www.code-couleur.com/signification
Crédit clipart: https://openclipart.org/detail/4421/aquarela-colors-by-valessiobrito-4421

10 réponses

  1. Vince dit :

    Super article pour un débutant comme moi. C’est mon agence qui a fait le design actuel je saurai quoi demander pour la refonte de ma boutique

  2. […] Bien utilisées, les couleurs d’un site internet peuvent aider à faire passer un message, à appuyer du contenu, mal utilisées elles peuvent ruiner une page.  […]

  3. […] Connaissez-vous les règles pour définir la palette de couleur à utiliser sur votre site web ? Savez-vous quel outil utiliser ? Les réponses à vos questions sont ici  […]

  4. […] un travail plus poussé en déterminant la famille de couleurs à utiliser (monochrome, complémentaires, triadiques, tétradiques, analogues); article de Responsive Mind […]

  5. […] Adobe Kuler. Palettes: ColourLovers. Quelles couleurs pour vos sites web ? La théorie, les outils… Bien utilisées, les couleurs d’un site internet peuvent aider à faire passer un message, à […]

  6. Article intéressant….qui va m’obliger à retravailler notre site!!!!merci

  7. Renaud M.G. dit :

    @Chapoutot Alain, merci pour le commentaire. Je ne pense pas que les couleurs soient le chantier prioritaire sur ton site : à moins d’un bug temporaire, les liens de footer sont inactifs, les blocs de la colonne de droite ne sont pas ordonnés de façon optimale… par contre je trouve l’univers graphique cohérent et en phase avec le sujet.

  8. […] Nuages de mots. Gestion du temps. Propriété intellectuelle. Architectes. Quelles couleurs pour vos sites web ? La théorie, les outils… […]

  9. […] Quelles couleurs pour vos sites web ? La théorie, les outils… Flat UI Colors. Roue chromatique | Modèles de couleurs. Utiliser le cercle chromatique pour choisir ses couleurs. Pourpre.com – les mondes de la couleur, les couleurs du monde. […]

  10. […] Quelles couleurs pour vos sites web ? La théorie, les outils… DraGGradients — create custom css radial-gradients dragging your mouse. […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *