L’essentiel en bref
- La règle des 60 30 10 dit qu’un design équilibré utilise une couleur dominante sur environ 60 % de l’espace, une couleur secondaire sur environ 30 % et un accent sur environ 10 %.
- Cette règle vient de la décoration d’intérieur, où les murs, le mobilier et les accessoires se répartissent naturellement en ces trois rôles.
- À l’écran, les 60 % sont généralement le fond, les 30 % portent les panneaux, les formes ou le texte, et les 10 % vont à la seule chose que l’on veut faire remarquer ou toucher.
- Dans un dégradé, la règle décide de la place que prend chaque couleur dans le champ, c’est pourquoi l’accent doit apparaître sur une petite zone plutôt que sur une bande entière.
- Ces chiffres sont un point de départ : les neutres peuvent compter dans les 60 %, et beaucoup de bons designs se rapprochent plutôt de 70-25-5 ou de 90-10.
Sur cette page
La règle des 60 30 10, le plus souvent écrite 60-30-10, est un guide simple pour doser la couleur : une couleur dominante sur environ 60 % d’un design, une couleur secondaire sur environ 30 % et un accent sur les 10 % restants. Elle vient de la décoration d’intérieur, où murs, meubles et accessoires prennent ces rôles d’eux-mêmes. Elle fonctionne tout aussi bien pour les posts, les diapositives, les sites web et les palettes de marque, car elle évite que chaque couleur se dispute la même attention.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)Ce que fait chaque part
Les trois parts n’ont pas le même rôle. Les 60 % donnent l’ambiance et sont généralement calmes : un fond, un sol, un mur. Les 30 % apportent la structure et le contraste, avec des panneaux, des formes ou un grand texte. Les 10 % sont là où l’œil va en premier : ils reviennent donc à l’élément le plus important, un bouton, un prix, une date, un logo.
| Part | Rôle | Couleur type | Où l’utiliser |
|---|---|---|---|
| 60 % | Dominante | Discrète : un neutre, une teinte pâle ou un sombre profond | Fonds, grandes zones, arrière-plan de page |
| 30 % | Secondaire | Contrastée sans être criarde | Panneaux, cartes, grand texte, zones d’image |
| 10 % | Accent | La couleur la plus saturée de votre palette | Boutons, prix, mots clés, petites formes |
La règle 60-30-10 sur un post pour les réseaux sociaux
Sur un post, la couleur dominante est le fond, la secondaire est le titre ou une forme derrière lui, et l’accent est un petit détail : une date, un prix ou un seul mot souligné. L’erreur classique est de donner l’accent à tout le titre. Alors 30 % du post crient, et rien ne ressort parce que tout ressort.
Fond dominant, texte secondaire, et l’accent réservé à la ligne de la date.
Les mêmes proportions sur une diapositive large. Les parts tiennent même quand la forme change.
L’appliquer aux diapositives et aux sites web
Sur des diapositives, fixez les 60 % une fois pour toutes, comme fond de chaque diapositive, et n’y touchez plus. Réservez les 30 % aux titres, aux graphiques et aux cadres d’image. Les 10 % vont au seul chiffre ou au seul mot que le public doit retenir sur chaque diapositive. Le guide sur les arrière-plans de présentation va plus loin sur les fonds qui ne rivalisent pas avec le contenu.
Sur un site web, le fond de page et les grandes sections sont les 60 %, la navigation, les cartes, les pieds de page et le texte courant sont les 30 %, et les 10 % vont aux appels à l’action et aux liens. Si votre bouton principal a la même couleur que vos titres, il ne reste plus d’accent pour guider le regard.
:root {
--dominant: #f3efe6; /* 60%: page and section backgrounds */
--secondary: #1f3a5f; /* 30%: headings, cards, navigation, footer */
--accent: #e76f51; /* 10%: buttons, links, key numbers */
}
body { background: var(--dominant); color: var(--secondary); }
.card { background: var(--secondary); color: var(--dominant); }
.button { background: var(--accent); color: #1a0f0b; }Pour une marque, inscrivez les parts dans votre guide de style de marque, à côté des codes hex. Une palette sans proportions invite chaque designer à choisir sa couleur préférée pour le fond, et en un mois la marque ressemble à trois marques.
La règle des 60 30 10 dans un dégradé
Les dégradés brisent facilement les proportions, car un mélange uniforme donne à chaque couleur la même part. Appliquez la règle en déplaçant les points de couleur : laissez la dominante tenir l’essentiel du champ, fondez-la dans la secondaire sur un tiers, et n’amenez l’accent que sur un bord ou une petite lueur.
Quand assouplir ou briser la règle
La briser quand
- Vous travaillez dans une seule teinte : un schéma monochrome se rapproche du 60-30-10 par la luminosité plus que par la teinte
- Le design est surtout du texte sur un neutre, où le 90-10 est plus net
- Une photo apporte sa propre couleur et votre palette ne fait que l’encadrer
- La couleur de marque doit dominer, comme sur une affiche en rouge de marque intégral
La garder quand
- Les couleurs se font concurrence et rien ne ressort
- Une équipe partage une palette et a besoin d’une règle à suivre
- Vous avez trois couleurs fortes ou plus à équilibrer
- Les boutons et les chiffres clés se perdent
Les chiffres sont approximatifs. L’espace blanc compte. Des neutres comme le blanc cassé, l’anthracite et le sable peuvent faire vos 60 %, avec deux vraies couleurs pour se partager le reste. Ce qui compte, c’est l’ordre : un chef de file clair, un soutien, un accent rare. Pour choisir les couleurs elles-mêmes, voyez comment choisir les couleurs de sa marque et les bases de la théorie des couleurs.
Les questions qu’on nous pose
Qu’est-ce que la règle des 60 30 10 ?
C’est un repère de proportion des couleurs : environ 60 % d’un design dans une couleur dominante, 30 % dans une couleur secondaire et 10 % dans une couleur d’accent.
D’où vient la règle 60-30-10 ?
C’est une règle empirique ancienne de la décoration d’intérieur, où les murs, le mobilier et les accessoires prennent naturellement les trois parts.
Le blanc compte-t-il dans la règle des 60 30 10 ?
Oui. Les neutres comme le blanc, le blanc cassé, le sable ou l’anthracite forment souvent les 60 % dominants, ce qui laisse les 30 % et les 10 % à de vraies couleurs.
De quelle couleur doit être l’accent de 10 % ?
En général votre couleur la plus saturée, utilisée sur l’élément que l’on doit remarquer en premier, comme un bouton, un prix ou une date.
Comment utiliser la règle 60-30-10 dans un dégradé ?
Déplacez les points de couleur pour que la dominante couvre l’essentiel du champ, que la secondaire se fonde sur environ un tiers, et que l’accent n’apparaisse que sur une petite zone ou un bord.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
