# La règle des 60 30 10 : doser les couleurs d’un design

[Canonical HTML page](https://gradiently.design/fr/guide/60-30-10-rule)

La plupart des palettes échouent sur les proportions, pas sur le choix des couleurs. Trois chiffres disent quelle part donner à chaque teinte, et ils fonctionnent aussi bien sur un écran de téléphone que dans les salons dont ils viennent.

## The short version

- 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.

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.

60 sable, 30 bleu marine, 10 corail: `linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)`

La règle dessinée sous forme de barre. L’accent est petit, et c’est précisément pour cela qu’on le voit en premier.

## 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 |

L’accent fonctionne parce qu’il est rare. Doublez-le et ce n’est plus un accent.

- 60 Sable: #f3efe6
- 30 Bleu marine du port: #1f3a5f
- 10 Corail: #e76f51

Une palette écrite avec ses proportions. Noter la part à côté de chaque couleur évite à une équipe d’utiliser le corail partout.

## 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.

Un post d’événement en portrait pour un salon de l’estampe, avec un fond calme, un titre fort et un petit accent sur l’horaire

Fond dominant, texte secondaire, et l’accent réservé à la ligne de la date.

Le même design de salon de l’estampe en diapositive large 16 par 9, avec le même équilibre de couleurs

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](https://gradiently.design/fr/guide/presentation-backgrounds) 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.

```css
: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; }
```

Nommer les couleurs par rôle plutôt que par teinte rend les proportions difficiles à casser. Un texte sombre sur le bouton corail atteint environ 6:1.

> **Le test des yeux plissés** Plissez les yeux devant votre design terminé jusqu’à ce que les détails se fondent. Vous devriez voir une grande couleur, une deuxième bien nette et un petit point vif. Si vous voyez trois blocs égaux, ou si l’accent s’étale sur toute la mise en page, ramenez les parts vers 60, 30 et 10.

Pour une marque, inscrivez les parts dans votre [guide de style de marque](https://gradiently.design/fr/guide/brand-style-guide), à 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.

- Tiers égaux : aucune couleur dominante: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)`
- 60-30-10 : le marine mène: `linear-gradient(160deg, #13253f 0%, #1f3a5f 50%, #4f7cac 78%, #e76f51 100%)`
- Sombre : encre, ardoise, or: `linear-gradient(90deg, #0f172a 0% 60%, #475569 60% 90%, #fbbf24 90% 100%)`
- Doux : sauge, crème, prune: `linear-gradient(90deg, #8fa98f 0% 60%, #f5efe0 60% 90%, #6b2d5c 90% 100%)`

Le premier mélange donne trois couleurs de même poids et paraît chargé. Le deuxième garde la même idée, mais en proportion. Les deux derniers sont des schémas 60-30-10 prêts à l’emploi.

## Quand assouplir ou briser la règle

### La briser quand

- Vous travaillez dans une seule teinte : un [schéma monochrome](https://gradiently.design/fr/guide/monochromatic-color-scheme) 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](https://gradiently.design/fr/guide/how-to-choose-brand-colors) et [les bases de la théorie des couleurs](https://gradiently.design/fr/guide/color-theory-basics).

## FAQ

### 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.