Comment trouver la couleur de son site web ?

La palette de couleurs d'un site web va jouer un rôle important auprès de vos visiteurs.

• Elle peut influencer la manière dont ils perçoivent votre univers et votre marque, y associent certaines émotions ;
• Elle influe sur la mémorisation. Cette étude a montré que l'utilisation de couleurs très reconnaissables augmentait de 80% la capacité des consommateurs à se souvenir d'une marque ;
• La couleur joue aussi un rôle très pratique : celui d'attirer l'attention sur des éléments spécifiques de la page, ou encore de guider l'internaute vers une action précise, ce qui peut contribuer à la conversion ;
• Elle améliore souvent la lisibilité et peut jouer sur l'accessibilité du contenu.

Mais alors, comment trouver la couleur de son site web ? Quels critères prendre en compte, quelles erreurs éviter, quels outils utiliser pour trouver une palette de couleurs adéquate ? Retrouvez plein de conseils et astuces dans ce guide !

Sur quels critères choisir la palette de couleurs d'un site web

L'image que vous souhaitez renvoyer

Vous pouvez déjà prendre appui sur votre marque et l'image que vous souhaitez véhiculer. En effet, en matière de colorimétrie, il existe certains codes tacites, des couleurs que vous retrouverez chez certaines marques et pas d'autres.

Des recherches ont été faites sur la psychologie des couleurs et associent certaines couleurs à des émotions précises. Pour citer quelques exemples :

• Le rouge est associé à la confiance, l'action, l'audace, l'ambition, le pouvoir, le leadership, l'énergie. C'est une couleur que l'on retrouve chez des marques comme Red Bull, Coca-Cola ou Kellogg's.
• Les tons jaune et orange exprimeraient la liberté, l'optimisme, la chaleur, dégageant un côté extraverti, spontané et optimiste. On les retrouve par exemple chez Easyjet, Mc Donald's, Fanta ou encore Hermès.
• Le vert est associé à la nature mais aussi à la croissance, à l'équilibre, à la sécurité. C'est une couleur qui se veut rassurante, traduisant la prospérité et la générosité. On la retrouve chez des marques comme Spotify, Starbucks ou encore Tic Tac.
• Le bleu représente la détermination, la maîtrise, l'indépendance et l'ouverture. C'est la couleur choisie par exemple par WordPress, Twitter, Nestlé ou Decathlon.
• Le bleu marine représente plutôt la confiance, la fidélité, la sincérité, le calme et la paix. Il a par exemple été choisi par Facebook, Nivéa ou encore l'assureur Allianz.
• Le violet véhicule des notions de créativité et d'originalité mais aussi la royauté et la prospérité, une couleur peu conventionnelle mise en avant par des marques comme Marionnaud, Milka ou Yahoo.
• Le rose est associé à l'amour, l'intuition, la sensibilité et reste perçu comme une couleur "féminine". C'est le rose du logo Barbie ou de marques de presse dite "féminine" comme Cosmopolitan.
• Le noir reflète souvent l'exclusivité et le prestige, c'est une couleur largement utilisée par les marques de luxe.

Même s'il existe des exceptions, certaines couleurs ont tendance à être associées au "pas cher" voire au "bas de gamme". Selon cet article passionnant, c'est notamment le cas pour le orange, le jaune et le marron. A l'inverse, le noir et le bleu sont davantage associés à la "haute qualité". Il est utile d'avoir conscience de ces écarts de perception, afin que votre choix de couleurs corresponde à l'image que vous voulez renvoyer.

Tenir compte de votre cible

La couleur comporte aussi une composante culturelle à ne pas négliger.

A titre d'exemple, dans nos sociétés européennes, le rose a longtemps été associé à la féminité et le bleu à la masculinité... alors qu'au Japon par exemple, le rose est plutôt une couleur masculine.

Chez les catholiques, le violet reste historiquement associé au deuil et dans certains pays comme la Thaïlande, c'est une couleur que l'on porte en cas de veuvage. A l'inverse, aux Etats-Unis, le violet est une couleur très positive associée à la réussite, à la santé financière, etc.

Il faut donc avoir conscience que d'une culture à l'autre, d'une personne à l'autre, une même palette de couleurs ne sera pas perçue de la même manière.

L'importance de l'accessibilité

Les couleurs ne sont pas perçues à l'identique par tout le monde. Il y aurait jusqu'à 8% de daltoniens chez les garçons (et moins de 1% chez les filles), certaines personnes ont besoin de contrastes forts ou voient en noir & blanc. Le choix de la palette de couleurs d'un site web va donc impacter l'accessibilité de celui-ci.

Quelles erreurs éviter quand on souhaite trouver la couleur d'un site web ?

Au-delà de vos goûts, préférences et inspirations qui peuvent vous orienter vers une couleur plus qu'une autre, il est important d'éviter certains écueils lorsqu'il s'agit de trouver la couleur de votre site Internet.

Voici quelques erreurs fréquentes :

• Utiliser un trop grand nombre de couleurs : souvent, on considère qu'il est préférable de se limiter à 3 couleurs maximum. Même s'il n'y a pas de règle stricte, l'idée est de garder un design cohérent pour limiter les problèmes d'accessibilité et de lisibilité.
• Ne pas prendre en compte la psychologie des couleurs : comme je l'évoquais, les couleurs sont porteuses de certaines valeurs et émotions pour beaucoup de gens. Vous pouvez être en désaccord avec cette idée à titre personnel, il n'en demeure pas moins que cela peut impacter la perception de votre marque, d'où l'intérêt d'en tenir compte.
• Ne pas prendre en compte le contexte culturel : là encore, certaines associations sont ancrées dans les traditions et l'histoire d'un pays. Ne pas en tenir compte, c'est prendre le risque que votre marque soit associée à un ressenti qui n'est pas celui que vous aimeriez lui donner.
• Oublier de tester le rendu sur différents templates et appareils : il est important que vous puissiez visualiser les palettes de couleurs que vous pressentez "en conditions réelles", en les testant sur votre site. Les écrans sont parfois calibrés différemment d'un appareil à l'autre, ce qui peut jouer sur la perception du design des sites. Par ailleurs, la lisibilité de certaines couleurs peut être moins bonne sur le petit écran d'un smartphone que sur un grand écran, une incitation à ne pas utiliser les couleurs en question sur de petits éléments (boutons, etc.).
• Manquer de cohérence : il est important de décliner les couleurs que vous allez retenir sur l'ensemble de vos templates pour éviter des changements d'univers intempestifs d'une page à l'autre.

Avec quels outils trouver la couleur d'un site web ?

Un guide pour le choix de votre couleur dominante

Souvent, votre point de départ va consister à déterminer une couleur dominante, celle qui représente le mieux votre univers en prenant appui sur la psychologie des couleurs. Vous allez ensuite faire appel à des outils qui vont vous aider à l'associer au mieux à d'autres teintes.

Le site Color Meanings est entièrement dédié à l'interprétation des couleurs. Il propose notamment des "fiches thématiques" pour toutes sortes de teintes : ce qu'elles symbolisent, les effets qu'elles exercent sur les gens, les aspects positifs de la couleur mais aussi l'éventuelle perception négative que l'on peut en avoir...

La roue chromatique

Votre principal allié dans la recherche de la couleur idéale va être la roue chromatique. Une roue chromatique repose sur un principe simple : toutes les couleurs ne vont pas ensemble et certaines associations fonctionnent mieux que d'autres. La roue va justement représenter les relations entre les couleurs pour vous aider à trouver des combinaisons pertinentes.

Elle va inclure :

• Les 3 couleurs primaires (couleurs qui ne peuvent pas être obtenues en mélangeant d'autres couleurs), rouge/vert/bleu sur le web ;
• Les couleurs secondaires, que l'on obtient en mélangeant des couleurs primaires ;
• Les couleurs tertiaires, que l'on obtient en mélangeant une couleur primaire et une couleur secondaire.

La roue chromatique va ensuite vous proposer différentes combinaisons de couleurs, chaque combinaison reposant sur un type d'association, par exemple :

• Le camaïeu, qui consiste à prendre différentes variations d'une même couleur ;
• Une association monochrome : une même couleur, avec différents degrés de luminosité.
• Une association en triade, où l'on va piocher 3 couleurs opposées sur la roue.
• Jouer sur la complémentarité, en puisant des variations de couleurs situées à 2 extrêmes de la roue.

En fonction de vos choix, différentes palettes de couleurs et nuances vous sont proposées, avec les codes hexadécimaux associés : la notation hexadécimale permet de représenter la couleur en langage HTML, donc dans le code d'une page web.

Parmi les outils que vous pouvez tester, la roue chromatique d'Adobe ou celle de Canva.

Un générateur de palettes de couleurs

C'est une approche un peu différente mais qui aboutit au même résultat : au lieu de vous appuyer sur une roue, vous allez utiliser des outils qui vous suggèrent des palettes prêtes à l'emploi en fonction de vos critères.

L'outil Coolors est sans doute le plus connu en la matière. Il vous propose des palettes aléatoires, un simple clic sur la touche "Espace" de votre clavier permet d'obtenir une nouvelle suggestion.

Mais vous pouvez aussi générer une palette à partir d'une photo que vous aimez bien, grâce à ce bouton du menu :

Si une palette vous plaît, vous pouvez aussi y apporter des changements en jouant sur la teinte, la saturation de la couleur, la luminosité ou encore la température (couleurs plus ou moins chaudes).

Le site Canva propose aussi un générateur de palette à partir d'une image, vous pouvez également explorer des dizaines de pages de palettes déjà disponibles.

Tester l'accessibilité des couleurs

Certains outils permettent de tester vos palettes de couleurs au prisme de différents handicaps visuels, pour vous rendre compte de la manière dont une personne souffrant d'une déficience à ce niveau perçoit votre site.

Coolors (encore lui !) propose un bouton de test qui vous montre comment votre palette va être perçue par des gens souffrant par exemple de protanopie, deutéranopie, tritanopie, achromatopsie, protanomalie, deutéranomalie, tritanomalie, achromatomalie.

Le Colorblind Web Page Filter vous permet quant à lui de visualiser une page web en ligne en simulant une déficience visuelle. Ici par exemple, voici à quoi ressemble ma page d'accueil pour une personne souffrant de deutéranopie.

Avec ces outils, vous devriez pouvoir à la fois trouver la couleur de votre site web mais aussi vous assurer de son accessibilité.