Choisir les couleurs d’un site web : une méthode simple pour construire une palette cohérente

Ah, la couleur !

J’avoue avoir longtemps repoussé l’écriture de cet article. Je n’avais envie ni de produire un énième « guide ultime de la colorimétrie », ni de vous faire un cours complet sur la théorie des couleurs. D’excellents contenus existent déjà sur ces sujets.

Je ne voulais pas non plus vous conseiller un outil magique capable de générer « la palette parfaite » à partir d’une couleur, car ce n’est pas ainsi que je travaille.

Pour la plupart des sites que je conçois, je commence avec un système beaucoup plus simple : quelques couleurs, chacune avec un rôle précis.

Et très souvent, quatre suffisent.

Commencez par donner un rôle à quatre couleurs

Une palette web cohérente n’a pas nécessairement besoin de dix nuances savamment coordonnées.

Pour commencer, je cherche généralement à définir quatre couleurs :

• une couleur d’accent,
• une couleur sombre,
• une couleur claire,
• une couleur pour le corps de texte.

Rien ne vous empêche ensuite d’ajouter quelques variations, des teintes intermédiaires ou une seconde couleur d’accent. Mais avant de multiplier les possibilités, assurez-vous que chaque couleur possède une véritable fonction.

Quatre couleurs, quatre rôles : structurer, attirer, rythmer et faciliter la lecture. La cohérence commence souvent par là.

La couleur d'accent

La couleur d’accent est généralement la plus identifiable de la palette. Elle provient souvent directement du logo ou de la charte graphique.

C’est également celle que j’utilise avec le plus de prudence, car plus une couleur d’accent est présente, moins elle accentue quoi que ce soit.

Si vos boutons, vos titres, vos icônes, vos fonds, vos liens et vos éléments décoratifs utilisent tous la même couleur vive, celle-ci ne guide plus le regard : elle devient simplement omniprésente.

Je préfère donc la réserver aux éléments qui méritent réellement l’attention :

• les principaux appels à l’action ;
• les liens et éléments interactifs ;
• certains détails d’illustrations ou de pictogrammes.

Quelques touches bien placées suffisent généralement.

La couleur sombre

J’évite généralement le noir absolu #000000. Ce n’est évidemment pas un interdit, mais une couleur sombre légèrement teintée apporte souvent davantage de caractère à une interface.

Une technique que j’aime utiliser consiste à partir de ma couleur d’accent et à travailler ses valeurs en HSL — teinte, saturation et luminosité.

Je conserve sa teinte, puis je réduis fortement sa luminosité. Je peux également diminuer sa saturation afin d’obtenir une couleur sombre plus discrète.

On obtient ainsi un presque noir qui conserve subtilement l’ADN de la palette.

La différence peut sembler minime lorsqu’on observe la couleur isolément. À l’échelle d’une page entière, elle contribue pourtant à renforcer la cohérence de l’ensemble.

Cette couleur sombre fonctionne particulièrement bien pour :

• les titres,
• certains fonds de sections,
• les traits des illustrations ou de pictogrammes,
• éventuellement le corps de texte si le contraste reste suffisant.

La couleur claire

Le même principe peut être appliqué dans l’autre direction.

Plutôt que d’utiliser uniquement du blanc pur, j’aime disposer d’un presque blanc capable de créer de légères variations entre les sections.

Vous pouvez repartir de votre couleur principale, augmenter fortement sa luminosité et réduire sa saturation jusqu’à ne conserver qu’une nuance presque imperceptible.

Le but n’est pas d’obtenir un fond franchement coloré. Si le visiteur doit presque se demander s’il s’agit réellement de blanc, vous êtes probablement proche du résultat recherché.

Et si vous ne souhaitez pas vous compliquer la vie, un gris très clair comme #F4F4F4 fonctionne très bien dans de nombreuses situations.

Cette couleur permet notamment de rythmer une page avec une alternance simple :

fond blanc → fond clair → fond blanc → fond sombre

Sans ajouter d’effet particulier, cette succession suffit à séparer les contenus et à donner du rythme à la page.

Une même teinte peut déjà donner naissance à plusieurs rôles : accent, presque blanc et presque noir. Simple, cohérent et largement suffisant pour construire une palette solide.

La couleur du corps de texte

Enfin, il faut choisir une couleur confortable pour les textes courants.

Un gris sombre comme #545454 constitue souvent une bonne base sur un fond clair. Mais cette valeur n’est pas une règle absolue : un bleu nuit, un brun très sombre ou une autre couleur issue de votre palette peut parfaitement fonctionner.

L’essentiel est ailleurs : le texte doit rester facile à lire et suffisamment contrasté avec son arrière-plan.

Votre couleur préférée n’a finalement pas beaucoup d’intérêt si elle oblige les visiteurs à plisser les yeux pour terminer un paragraphe.

Utilisez chaque couleur pour ce qu'elle sait faire

Une fois les couleurs définies, le plus difficile n’est plus vraiment de les choisir. C’est de résister à l’envie de les utiliser partout.

Les rôles définis au départ ne sont évidemment pas rigides. Une couleur sombre peut devenir un fond, la couleur d’accent peut ponctuellement remplir une section entière et le presque blanc peut servir de couleur de carte.

Mais attribuer une fonction principale à chaque couleur fournit un cadre, et ce cadre facilite énormément les décisions.

Au lieu de vous demander devant chaque module :

« Quelle couleur serait jolie ici ? »

demandez-vous plutôt :

« Quel rôle joue cet élément ? »

La réponse devient alors beaucoup plus simple.

Ce principe est particulièrement important pour la couleur d’accent. Si elle apparaît sur les titres, les pictogrammes, les chiffres, les boutons et les fonds, elle finit par ne plus guider le regard.

Si l’objectif principal de la page est la prise de contact, réserver la couleur la plus visible à cet appel à l’action suffit souvent à le faire ressortir. Pas besoin d’ajouter une ombre, une animation ou un bouton gigantesque : la rareté accomplit déjà une partie du travail.

Tout ce qui est accentué finit par ne plus rien accentuer.

L’accent ne fonctionne que s’il est dosé. Utilisé partout, il attire moins l’attention qu’il ne la disperse.

Deux erreurs qui fragilisent rapidement une palette

Négliger les contrastes

Une combinaison peut être très jolie dans un nuancier et devenir catastrophique lorsqu’elle sert à afficher du texte.

C’est particulièrement fréquent :

• sur les fonds sombres,
• avec les couleurs pastel,
• avec les petits textes,
• lorsque certaines couleurs d’accent deviennent des fonds de boutons.

Ne choisissez donc jamais vos couleurs uniquement parce qu’elles fonctionnent bien côte à côte. Testez-les dans les véritables usages du site.

Un bouton doit rester lisible, un paragraphe doit être confortable et un lien doit pouvoir être identifié sans dépendre uniquement de sa couleur.

Pour les textes courants, vérifiez également que le rapport de contraste atteint au moins 4,5:1. C’est plus fiable que de se fier uniquement à son impression visuelle.

Ajouter une couleur « parce qu'elle est stylée »

Vous avez une palette qui fonctionne, puis vous découvrez un joli vert sauge, un bleu électrique ou un beige terracotta qui irait vraiment bien quelque part.

C’est tentant, mais cette nouvelle couleur doit désormais cohabiter avec tout le reste et trouver sa place dans le système.

Avant de l’ajouter, demandez-vous donc quel problème elle résout et quel rôle elle va jouer.

Une couleur supplémentaire doit apporter quelque chose à la palette, pas simplement vous plaire dans le nuancier.

Plus la palette s’élargit, plus sa gestion demande de la rigueur.

Et si votre charte possède deux couleurs fortes ?

C’est une situation fréquente. Il m’arrive régulièrement de travailler avec des identités visuelles qui possèdent deux couleurs suffisamment présentes pour jouer le rôle d’accent.

Dans ce cas, j’évite de leur donner exactement la même importance. Je définis plutôt une couleur principale et une couleur secondaire.

Je ne choisis pas automatiquement la plus vive. Je regarde surtout celle qui fonctionne le mieux comme signal dans l’interface :

• ressort-elle suffisamment sur les fonds clairs et sombres ?
• permet-elle de créer des appels à l’action contrastés et lisibles ?
• attire-t-elle naturellement le regard ?
• fonctionne-t-elle avec la couleur sombre de la palette ?

Une fois cette hiérarchie définie, les rôles deviennent plus simples :

• la couleur principale sert aux appels à l’action, aux éléments prioritaires et aux principaux points d’attention ;
• la couleur secondaire intervient sur des liens moins importants, certains éléments graphiques, des illustrations ou, ponctuellement, un fond de section.

Vous conservez ainsi la richesse de la charte sans créer deux couleurs qui se disputent constamment l’attention.

Moins de couleurs, plus de cohérence

Une palette réussie n’est pas nécessairement une palette sophistiquée. Pour beaucoup de sites vitrines, quelques couleurs bien choisies et correctement utilisées suffisent largement.

Commencez par quatre rôles simples :

attirer → structurer → rythmer → faciliter la lecture.

Vous pourrez ensuite enrichir cette base si un véritable besoin apparaît. Comme souvent en webdesign, la difficulté n’est pas d’ajouter toujours plus de possibilités, mais de savoir quand s’arrêter.

Pour aller plus loin

La couleur participe à un système plus large. Si vous souhaitez poursuivre, ces deux articles constituent les prolongements les plus naturels :

→ Hiérarchie visuelle : guider le regard et clarifier vos pages
Pour comprendre comment donner plus ou moins d’importance aux éléments d’une page, notamment grâce à la couleur.

→ Design des textes : rendre vos contenus plus lisibles et agréables à lire
Pour construire un système typographique cohérent qui fonctionne avec votre palette.

Et maintenant ?

Cet article fait partie des principes que j'utilise quotidiennement pour concevoir mes sites.

Vous voulez continuer à apprendre.

Découvrez mon guide gratuit pour préparer, concevoir et faire durer un site professionnel.