Vous avez choisi trois belles couleurs pour votre marque, mais le résultat à l’écran ressemble à un sapin de Noël ? Le problème vient rarement des couleurs elles-mêmes : il vient de leurs proportions. C’est exactement ce que corrige la règle 60-30-10, une formule de répartition empruntée à la décoration d’intérieur et redoutablement efficace en design graphique, en webdesign et en print.
Dans ce guide pratique, nous expliquons comment appliquer la règle des 60-30-10 à une identité visuelle complète, avec des exemples chiffrés sur une page d’accueil, un packaging et des visuels réseaux sociaux.
Qu’est-ce que la règle 60-30-10 en couleur ?
La règle 60-30-10 est un principe de composition qui consiste à répartir trois couleurs selon des proportions fixes sur une surface donnée :
- 60 % : la couleur dominante, celle qui occupe les grandes surfaces et donne le ton général (fonds, arrière-plans, grandes zones).
- 30 % : la couleur secondaire, qui structure et crée le contraste (blocs, sections, en-têtes, encadrés, photos traitées).
- 10 % : la couleur d’accent, utilisée avec parcimonie pour attirer l’œil là où ça compte (boutons, pictos, prix, mentions clés).
| Proportion | Rôle | Où l’utiliser (web) | Où l’utiliser (print) |
| 60 % | Dominante / fond | Arrière-plan des pages, zones blanches, grandes sections | Fond de la couverture, du packaging, des pages intérieures |
| 30 % | Secondaire / structure | Header, footer, cartes, bandeaux, illustrations | Bandeaux, aplats, zones de texte, visuels produit |
| 10 % | Accent / action | Boutons CTA, liens, badges, icônes actives | Logo, mention promo, pictogrammes, filet de finition |
Pourquoi cette répartition fonctionne-t-elle ?
Trois raisons, très concrètes :
- Elle crée une hiérarchie visuelle. L’œil a besoin d’un point de repos (les 60 %) pour pouvoir identifier un point d’intérêt (les 10 %). Sans dominante calme, aucun accent ne ressort.
- Elle réduit la charge cognitive. Au-delà de trois couleurs à poids égal, le cerveau ne sait plus où regarder et le taux de conversion s’en ressent.
- Elle rend la marque reconnaissable. Une marque est mémorisée par sa couleur dominante, pas par son accent. La constance de proportion est aussi importante que la constance de teinte.
Déco d’intérieur vs design graphique : ce qui change
La plupart des contenus sur la règle 60-30-10 parlent de murs, de canapés et de coussins. En design de marque, la logique est la même mais trois nuances s’imposent :
- Le blanc (ou un neutre très clair) compte souvent comme la dominante. Sur un site, l’espace vide n’est pas du vide : c’est 60 % de votre composition.
- L’accent est fonctionnel, pas seulement décoratif. En web, les 10 % signalent l’action : bouton, lien, état actif. On ne les gaspille jamais sur un élément non cliquable.
- La proportion se calcule par écran, pas par site entier. Chaque section visible doit respecter l’équilibre, comme chaque pièce d’une maison.
Méthode en 5 étapes pour attribuer vos couleurs
1. Identifiez votre couleur de marque réelle
Votre couleur de logo n’est pas forcément votre dominante. Si elle est très saturée (rouge vif, orange, magenta), elle fera un excellent accent à 10 % et un fond épuisant à 60 %. Posez-vous la question : cette couleur est-elle supportable sur une surface d’un mètre carré ?
2. Choisissez la dominante (60 %)
Deux options efficaces :
- Dominante neutre : blanc cassé, gris très clair, beige, anthracite. C’est le choix le plus sûr, surtout en SaaS, en B2B et sur les interfaces riches en données.
- Dominante colorée désaturée : une version pâle de votre couleur de marque (par exemple un bleu à 8 % de saturation). Elle colore l’ensemble sans fatiguer.
3. Choisissez la secondaire (30 %)
Elle doit structurer : séparer un header d’un corps de page, différencier une carte de son fond. Elle peut être la couleur de marque en version moyenne, un neutre plus foncé, ou une couleur analogue (voisine sur le cercle chromatique).
4. Choisissez l’accent (10 %)
C’est la couleur la plus contrastée du trio. Règle simple : si vous retirez l’accent de la maquette, la page doit devenir visiblement moins compréhensible. Si rien ne change, votre accent est mal placé.
5. Documentez les proportions dans la charte graphique
Ne vous contentez pas de lister des codes hexadécimaux. Indiquez pour chaque couleur : son pourcentage cible, ses usages autorisés et ses usages interdits. C’est ce qui garantit que l’équipe marketing, l’imprimeur et le développeur produiront le même rendu.
| Couleur | Rôle | Usages autorisés | Interdits |
| Gris perle (60 %) | Dominante | Fonds de page, fonds de section | Texte courant, boutons |
| Bleu nuit (30 %) | Secondaire | Header, footer, titres, aplats | Boutons principaux |
| Corail (10 %) | Accent | CTA, liens, badges, pictos actifs | Grands aplats, fonds de section |
Exemple 1 : la règle 60-30-10 sur une page d’accueil
Prenons une page d’accueil classique composée d’un header, d’un hero, de trois sections et d’un footer. Voici une répartition qui fonctionne :
| Bloc | Dominante 60 % | Secondaire 30 % | Accent 10 % |
| Header | Fond clair | Logo et liens de navigation | Bouton « Essayer » |
| Hero | Grand fond uni | Illustration, titre | CTA principal uniquement |
| Section fonctionnalités | Fond de section | Cartes et bordures | Icônes |
| Section preuve sociale | Fond clair | Bandeau coloré de citation | Étoiles, chiffres clés |
| Footer | – | Grand aplat secondaire | Liens survolés |
Le test du plissement d’yeux
Reculez de deux mètres de votre écran et plissez les yeux. Vous devez voir : une grande masse claire, des blocs structurants, et un ou deux points colorés. Si vous voyez cinq points colorés, votre accent dépasse les 10 % et votre taux de clic sur le CTA va en souffrir.
Exemple 2 : la règle 60-30-10 sur un packaging
En print, la surface se mesure concrètement. Sur une boîte de produit cosmétique ou alimentaire :
- 60 % : la face principale et les côtés sont imprimés dans la dominante (par exemple un vert sauge mat). C’est elle qui sera vue à trois mètres en rayon.
- 30 % : un bandeau, une zone de texte produit ou un motif répété dans la secondaire (blanc cassé ou kraft).
- 10 % : un vernis sélectif, un dorure à chaud, le nom du parfum ou la mention « nouveau » dans la couleur d’accent.
Deux points de vigilance spécifiques au print :
- Le rendu CMJN diffère du RVB. Une couleur d’accent fluo à l’écran peut devenir terne à l’impression. Prévoyez une référence Pantone pour l’accent, c’est la couleur qui doit être exacte.
- Le support modifie la proportion perçue. Un aplat mat paraît moins présent qu’un aplat brillant. Sur support brillant, réduisez légèrement l’accent (7 à 8 %).
Exemple 3 : la règle 60-30-10 sur les visuels réseaux sociaux
Sur un format carré ou vertical vu en 2 secondes dans un fil, l’équilibre doit être encore plus strict.
| Type de post | 60 % | 30 % | 10 % |
| Post citation | Fond uni dominante | Bloc de texte secondaire | Mot surligné + logo |
| Carrousel pédagogique | Fond constant sur toutes les slides | Titres et numéros de slide | Flèche « swipe » et CTA final |
| Story / vertical | Photo désaturée ou fond uni | Bandeau de texte | Sticker, bouton, chiffre |
Astuce feed : appliquez aussi la règle à l’échelle de la grille. Sur 9 publications, prévoyez environ 5 à 6 visuels à dominante, 3 à secondaire et 1 « post d’accent » très coloré. Le profil reste harmonieux tout en gardant du rythme.
Les variantes utiles de la règle
La version 60-30-10-10 (ou 30-30-30-10)
Pour les marques qui ont besoin de plusieurs couleurs fonctionnelles (succès, erreur, information), gardez la base 60-30-10 pour l’identité et sortez les couleurs système du calcul : elles apparaissent ponctuellement et ne relèvent pas de l’esthétique de marque.
L’adaptation au mode sombre
En mode sombre, on n’inverse pas simplement les couleurs. La dominante devient un gris très foncé (jamais un noir pur, qui crée un halo visuel), et l’accent doit être éclairci de 10 à 20 % pour conserver un contraste lisible.
L’accessibilité, non négociable
Une belle répartition reste inutilisable si le contraste est insuffisant. Visez un ratio minimum de 4,5:1 pour le texte courant et 3:1 pour les gros titres et composants d’interface. Et n’utilisez jamais la couleur seule pour transmettre une information : ajoutez une icône ou un libellé.
Les 6 erreurs les plus fréquentes
- Prendre la couleur du logo comme dominante alors qu’elle est trop saturée.
- Multiplier les accents : deux boutons de couleurs différentes dans un même écran annulent l’effet.
- Oublier les images : une photo très colorée consomme de la proportion. Intégrez-la dans le calcul.
- Appliquer la règle au niveau du site entier et non écran par écran.
- Négliger le neutre : sans espace de respiration, même un trio parfait devient illisible.
- Ne pas documenter les proportions dans la charte, ce qui conduit à une dérive après quelques mois de production.
Checklist avant validation de votre charte
- Les trois couleurs sont définies en RVB, hexadécimal, CMJN et Pantone.
- Chaque couleur a un pourcentage cible et une liste d’usages interdits.
- Le test du plissement d’yeux est concluant sur trois gabarits différents.
- Les contrastes texte/fond respectent 4,5:1.
- Une variante mode sombre est prévue pour le web.
- Un gabarit réseaux sociaux et un gabarit print appliquent déjà la répartition.
FAQ sur la règle 60-30-10 en couleur
La règle 60-30-10 s’applique-t-elle aussi au web et à l’identité de marque ?
Oui. Née en décoration d’intérieur, elle s’applique à toute composition visuelle : site web, application, packaging, affiche, présentation, visuel social. Seuls les supports changent, les proportions restent identiques.
Qu’est-ce que la règle des 3 couleurs ?
C’est le principe selon lequel une composition harmonieuse ne doit pas dépasser trois couleurs principales. La règle 60-30-10 en est la version chiffrée : elle précise non seulement combien de couleurs utiliser, mais surtout dans quelles proportions.
Le blanc compte-t-il dans les 60 % ?
Oui, dès lors qu’il s’agit d’un choix délibéré. En webdesign, le blanc ou un neutre très clair est le plus souvent la couleur dominante à 60 %. L’espace vide est une couleur à part entière.
Peut-on utiliser plus de trois couleurs ?
Oui, à condition de les hiérarchiser. Les nuances d’une même teinte (clair, moyen, foncé) comptent comme une seule couleur. Les couleurs fonctionnelles d’interface (vert de validation, rouge d’erreur) sortent du calcul de la répartition esthétique.
Comment mesurer concrètement les proportions ?
Trois méthodes simples : exportez votre maquette en image et passez-la dans un extracteur de palette, qui affiche le pourcentage de chaque teinte ; floutez fortement le visuel pour juger les masses ; ou comptez les surfaces en pixels des blocs principaux. L’objectif est un ordre de grandeur, pas une exactitude au pourcent près.
Faut-il respecter la règle à la lettre ?
Non. 60-30-10 est un point de départ fiable, pas un dogme. Certaines marques fonctionnent en 70-20-10 (très épurées) ou 50-40-10 (plus contrastées). Ce qui compte, c’est de conserver une dominante nette, une secondaire structurante et un accent rare.
En résumé
La règle 60-30-10 ne vous dira pas quelles couleurs choisir, mais elle vous dira comment les faire cohabiter. Appliquée avec rigueur sur une page d’accueil, un packaging et vos visuels sociaux, elle transforme une palette correcte en identité visuelle cohérente, lisible et reconnaissable. Commencez par auditer un seul écran de votre site : vous verrez immédiatement où vos 10 % se sont dispersés.