Créer une palette de couleurs : la règle 60-30-10

Une bonne création de palette de couleurs ne consiste pas à choisir de jolies couleurs au hasard ; il s'agit de planifier la proportion de chaque couleur sur la page et le rôle qu'elle joue. C'est précisément pour cela que tant de palettes de débutants paraissent épuisantes : trois ou quatre couleurs vives se disputent à poids égal et l'œil ne sait plus où se poser. Dans ce guide, nous allons appliquer pas à pas une méthode classique qui crée l'équilibre toute seule — la règle 60-30-10 — et examiner des outils pratiques pour tester vos couleurs dans une vraie interface.

Qu'est-ce que la règle 60-30-10 ?

La règle vient de l'architecture d'intérieur et décrit la répartition des couleurs d'une composition en pourcentages. On répartit les couleurs d'une zone à peu près ainsi :

60 % — couleur dominante : arrière-plans, grands espaces vides, tonalité générale de la page. Généralement une couleur neutre ou peu saturée.
30 % — couleur secondaire : zones structurelles comme les cartes, les fonds de section et la navigation. Elle contraste avec la dominante sans se battre pour attirer l'attention.
10 % — couleur d'accent : boutons, liens, appels à l'action. La couleur la plus vive et la moins utilisée ; c'est justement cette rareté qui attire le regard.

Ces proportions n'ont pas besoin d'être mesurées au pixel près. Ce qui compte, c'est la hiérarchie : une couleur domine, une soutient, une étincelle. Tant que vous utilisez l'accent avec parcimonie, l'œil de l'utilisateur glisse naturellement vers les éléments importants.

Création de palette de couleurs étape par étape

Pour construire une palette de zéro, vous pouvez suivre cet ordre :

1. Partez d'une couleur de base. Le plus simple est généralement de commencer par la couleur de marque ou la teinte que vous voulez utiliser comme accent. Pensez-la en HSL, comme hsl(212, 90%, 50%).
2. Dérivez les neutres. Pour la zone dominante à 60 %, produisez un gris-bleu très peu saturé à partir de la même teinte (par ex. teinte 212, saturation 8 %). Des neutres légèrement teintés apportent une chaleur que le gris pur n'a pas.
3. Choisissez la couleur secondaire. Une teinte proche de la base (analogue) ou directement opposée (complémentaire). Les choix analogues sont calmes, les complémentaires sont énergiques.
4. Multipliez les nuances. Produisez des variations du clair au foncé pour chaque couleur principale (comme 50, 100, 200 … 900). Dans une vraie interface, vous aurez besoin de ces nuances intermédiaires pour le survol, les bordures et les ombres.
5. Vérifiez le contraste. Testez les paires texte/fond pour l'accessibilité (ci-dessous).

Utilisez les bons outils

Construire une palette à l'aveugle est fatigant ; des outils gratuits facilitent grandement la tâche :

Coolors et Adobe Color — génèrent des schémas d'harmonie comme complémentaire, analogue et triadique à partir d'une roue chromatique.
Figma — permet d'enregistrer votre palette en styles de couleur ou en variables et de les réutiliser de façon cohérente sur tout le design.
WebAIM Contrast Checker — mesure le rapport de contraste entre deux couleurs et indique la conformité WCAG AA/AAA.
Outils de développement du navigateur — le sélecteur de couleur des DevTools affiche le rapport de contraste instantanément à l'écran réel.

Un contraste accessible est indispensable

Une belle palette ne sert à rien si elle est illisible. Les normes WCAG exigent un rapport de contraste d'au moins 4,5:1 pour le texte de taille normale et 3:1 pour le grand texte (environ 24 px, ou 18,66 px en gras). Lorsque vous utilisez votre couleur d'accent sur un bouton, vérifiez toujours le contraste avec le libellé qui s'y trouve. Utiliser un bouton à faible contraste juste parce que c'est la couleur de marque pousse les utilisateurs à manquer l'action importante.

Une bonne habitude : testez la palette en thème clair et en thème sombre. Un jaune vif superbe en clair peut éblouir sur un fond sombre ; il faudra peut-être ajuster légèrement la teinte d'accent par thème.

Passer la palette en variables CSS

Une fois la palette arrêtée, la manière la plus propre de la mettre dans le code est d'utiliser les propriétés personnalisées CSS. Vous les définissez à un seul endroit et les utilisez partout :

:root {
  /* 60 % dominant / neutre */
  --bg: hsl(212, 8%, 97%);
  --surface: hsl(212, 10%, 92%);
  /* 30 % secondaire */
  --secondary: hsl(212, 30%, 35%);
  /* 10 % accent */
  --accent: hsl(212, 90%, 50%);
  --accent-hover: hsl(212, 90%, 44%);
  --text: hsl(212, 15%, 15%);
}

.btn {
  background: var(--accent);
  color: white;
}
.btn:hover { background: var(--accent-hover); }

Au lieu d'une variable de survol distincte, vous pouvez aussi la dériver avec une fonction de luminosité ; dans les navigateurs modernes, color-mix() facilite cela : background: color-mix(in srgb, var(--accent) 85%, black);

Erreurs fréquentes

Trop de couleurs d'accent. Plus de deux couleurs vives mène souvent au chaos ; limitez l'accent à une seule teinte.
Noir pur et blanc pur. #000 et #fff paraissent durs ; des neutres très foncés et très clairs sont plus doux.
Information portée par la seule couleur. Indiquer l'erreur/succès uniquement par rouge/vert exclut les utilisateurs daltoniens ; appuyez-le avec une icône ou du texte.

Questions fréquentes

Combien de couleurs une palette doit-elle contenir ?

En pratique, 3 couleurs principales (dominante, secondaire, accent) plus quelques variations du clair au foncé de chacune suffisent. Vous pouvez ajouter une ou deux couleurs d'état (succès, avertissement, erreur). Limiter le nombre de teintes principales à trois est l'approche la plus sûre pour la plupart des interfaces.

Dois-je respecter exactement le ratio 60-30-10 ?

Non. Les ratios sont un guide de hiérarchie, pas un objectif. L'essentiel est de positionner une couleur comme dominante, une comme soutien et une comme accent rare. Garder les pourcentages approximativement à l'œil suffit.

Quel est le moyen le plus rapide de démarrer l'harmonie des couleurs ?

Le plus rapide est de partir d'une seule couleur de marque et de générer un schéma complémentaire ou analogue avec Coolors ou Adobe Color. Ensuite, vous affinez les neutres et le contraste à la main.

Vous voulez une palette de couleurs équilibrée et accessible, adaptée à votre marque ? Si vous souhaitez un accompagnement professionnel pour un logo, une interface ou une identité de marque, contactez-moi.