combien de couleurs mon site Web doit-il utiliser ? la règle 60-30-10 et quand la briser

design · Oct 6, 2026 · 5 min read

la réponse honnête est un nombre suffisamment petit pour constituer un plan : une couleur fait le travail, une le soutient, un accent pour l'action. plus les neutres – les blancs, les quasi-noirs et les gris qui sont techniquement des couleurs mais fonctionnent comme la toile. tout le reste est une décoration qui demande aux visiteurs de garder en tête plus que ce que votre message mérite.

ce n'est pas une question de goût, c'est de l'arithmétique : chaque couleur supplémentaire multiplie les combinaisons que votre page peut produire, et la plupart de ces combinaisons sont pires que la base. c’est la retenue qui donne l’impression que les choix restants sont délibérés.

le partage 60-30-10, traduit pour les sites Web

la règle du design d’intérieur survit parce qu’elle fonctionne :

• 60 pour cent — la toile. fond et neutres. c'est là que réside l'espace blanc de l'ensemble du site, et pourquoi la plus grande zone est la plus calme.
• 30 % – le support. la couleur principale de votre marque : les en-têtes, les cartes, les endroits qui regroupent les informations. il fixe la température du site.
• 10 pour cent — l'accent. une couleur saturée réservée aux choses qui agissent : les boutons, les liens, l'état actuel. tout l'intérêt d'un accent est la rareté - au moment où cinq couleurs sont également fortes, aucune n'est un accent et rien ne pointe nulle part.

si vous avez lu what makes a website look cheap, vous avez déjà vu le mode d'échec de l'autre côté : trop de couleurs est l'un des signaux les plus forts qui soient.

comment choisir les vraies couleurs

partez de la marque, pas du sélecteur de palette : si l’entreprise a un logo, elle possède déjà une couleur. c'est votre 30. alors :

1. choisissez l'accent par travail, et non par préférence - c'est la couleur de faire la chose, il doit donc contraster fortement avec la toile et le support. le bleu et l'orange fonctionnent dans mille jeux pour une raison.
2. étendez d'abord les neutres. la plupart des moments « nous avons besoin de plus de couleurs » sont en fait « nos gris n'ont pas de gamme » : une bonne échelle neutre (arrière-plan, surface, bordure, texte) crée de la profondeur sans ajouter de teinte.
3. Vérifiez la lisibilité de l'association : texte sur chaque arrière-plan sur lequel il sera placé. le contraste est un nombre, pas une opinion : le seuil d'accessibilité est de 4,5 : 1 pour le corps du texte, et j'ajuste le mien en balayant la palette comme le décrit my color theory writeup.

texte sombre sur fond clair, un accent, c'est fait. si cela semble trop simple, la solution est la photographie et l'espacement, pas une quatrième teinte.

les exceptions — quand plus de couleurs sont correctes

la règle s'applique là où le contenu est la couleur :

• portfolio et photographie. l'œuvre fournit la palette ; le site revient aux tons neutres pour que les images créent chaque ambiance.
• des marques qui possèdent véritablement un arc-en-ciel. une marque pour enfants, un festival, un magasin de fournitures d'art — là, les nombreuses couleurs sont le message, et la discipline se déplace ailleurs : limitez l'arc-en-ciel à des composants spécifiques et gardez la typographie et la mise en page brutalement cohérentes.
• données et catégories. Les graphiques et les balises obtiennent une couleur par signification. la règle est la cohérence : une couleur signifie une chose partout sur le site, ou elle ne veut rien dire.

les exceptions partagent un trait : les couleurs sont un système choisi, et non un accident accumulé. c’est la véritable ligne de démarcation – pas le décompte.

FAQ : les questions que je reçois réellement

Le site Web doit-il correspondre exactement à mon logo ?

la couleur du logo oui, l'ensemble du site non : la teinte exacte du logo est souvent trop saturée pour couvrir 30 % d'une page. teintez-le plus foncé ou plus doux pour les grandes surfaces et conservez la version pure pour les petites marques.

et le mode sombre ?

cela double vos tests de surface, pas vos couleurs : même accent, neutres ajustés et les contrôles de contraste sont effectués deux fois. J'expédie les deux, et la méthode de balayage dans l'article sur la théorie des couleurs permet au thème sombre d'obtenir ses numéros.

Puis-je simplement utiliser la palette fournie avec mon modèle ?

vous le pouvez, et des milliers de sites le font – ce qui est exactement le problème. recolorer l'unique accent du modèle est l'heure la plus efficace en matière de personnalisation à faire soi-même.