La règle 60-30-10 aide à répartir les couleurs d'un site ou d'un visuel avec une couleur dominante, une couleur secondaire et une couleur d'accent. Elle donne un cadre simple pour créer une palette lisible, cohérente et plus facile à appliquer.
La règle 60-30-10 consiste à répartir les couleurs d’une création avec 60 % de couleur dominante, 30 % de couleur secondaire et 10 % de couleur d’accent. Elle sert à créer une hiérarchie visuelle claire sans multiplier les teintes. Sur un site web, elle aide à distinguer le fond, les zones de contenu et les éléments d’action.
Si vous partez d’une couleur de marque ou si vous cherchez une palette complète, vous pouvez gagner du temps avec notre générateur de palette de couleurs gratuit. L’idée n’est pas de choisir trois couleurs au hasard, mais de construire une combinaison utilisable sur une page, une publicité, une présentation ou une identité visuelle.
Chez Osmova, on voit souvent le même problème sur les interfaces et les supports graphiques : trop de couleurs fortes au même niveau. La règle 60 30 10 donne un cadre simple pour décider quelle couleur structure, quelle couleur accompagne et quelle couleur attire l’attention.
- Qu’est-ce que la règle 60 30 10 en design ?
- Pourquoi cette règle fonctionne-t-elle sur un site ou un visuel ?
- Comment répartir concrètement les 60 %, 30 % et 10 % ?
- Comment choisir les bonnes couleurs pour chaque rôle ?
- Comment appliquer la règle 60 30 10 sur un site web ?
- Quelles erreurs éviter avec la règle 60 30 10 ?
- Questions fréquentes
- Sources
Qu’est-ce que la règle 60 30 10 en design ?
La règle 60 30 10 est une méthode de répartition des couleurs. Elle propose de donner à une couleur dominante environ 60 % de l’espace visuel, à une couleur secondaire environ 30 %, puis à une couleur d’accent environ 10 %. Le Design System de l’État de l’Utah la présente comme une aide pour maintenir la focalisation et renforcer la hiérarchie visuelle.
Ce n’est pas une loi mathématique à appliquer au pixel près. C’est plutôt un repère de composition. Une interface peut rester réussie avec une répartition légèrement différente, tant que les rôles restent clairs. Le principe important : une couleur porte l’ambiance générale, une autre crée du contraste modéré, une dernière sert à guider l’oeil.
| Part | Rôle | Exemples d’utilisation |
|---|---|---|
| 60 % | Couleur dominante | Fond principal, grandes sections, zones calmes, arrière-plan |
| 30 % | Couleur secondaire | Blocs de contenu, cartes, bandeaux, pictogrammes, éléments de soutien |
| 10 % | Couleur d’accent | Boutons, liens importants, badges, appels à l’action, éléments à remarquer |
Pourquoi cette règle fonctionne-t-elle sur un site ou un visuel ?
Une bonne palette ne sert pas seulement à faire joli. Elle organise l’information. Quand toutes les couleurs crient en même temps, le lecteur ne sait plus quoi regarder. Avec la règle 60 30 10, chaque teinte a une mission précise, ce qui rend le design plus stable et plus lisible.
Sur une page web, cette logique aide à construire une hiérarchie : le fond laisse respirer le contenu, les blocs secondaires structurent la lecture, les accents signalent les actions importantes. Material Design, le système de design de Google, insiste aussi sur l’usage de couleurs primaires et secondaires pour créer des interfaces cohérentes, avec des variations plus claires ou plus foncées selon les besoins.
La règle fonctionne aussi parce qu’elle limite les décisions. Au lieu d’ajouter une nouvelle couleur à chaque problème, on revient à trois rôles. Cette contrainte améliore souvent la cohérence d’un site, d’une landing page, d’un carrousel social, d’une affiche ou d’une présentation commerciale.
Comment répartir concrètement les 60 %, 30 % et 10 % ?
Pour appliquer la règle 60 30 10, partez des surfaces visibles, pas seulement du nombre d’éléments. Un bouton rouge compte peu si sa surface est petite, mais il peut avoir un impact très fort grâce à son contraste. Voici une méthode simple.
- Identifiez la couleur dominante : elle doit pouvoir occuper de grandes zones sans fatiguer. Sur un site, il s’agit souvent d’un blanc cassé, d’un gris très clair, d’un bleu profond, d’un beige ou d’une couleur de fond issue de l’identité visuelle.
- Choisissez la couleur secondaire : elle doit compléter la dominante et aider à structurer les contenus. Elle peut être utilisée pour les cartes, les séparateurs, les blocs de mise en avant ou certains visuels.
- Réservez la couleur d’accent : elle doit être suffisamment visible pour attirer l’attention. Elle convient aux boutons, aux liens clés, aux icônes importantes ou aux messages à forte priorité.
- Testez sur une vraie maquette : une palette séduisante isolée peut devenir confuse sur une page complète. Appliquez vos couleurs sur un écran réel, avec textes, images, boutons et états interactifs.
- Ajustez selon l’usage : si l’accent est partout, il ne joue plus son rôle. Si la dominante est trop intense, l’interface devient lourde. Corrigez jusqu’à retrouver un équilibre visuel.
Besoin d’une base rapide ? Utilisez le générateur de palette de couleurs Osmova pour créer une combinaison harmonieuse, puis attribuez chaque couleur à un rôle : dominante, secondaire, accent. Vous pouvez ensuite tester cette palette sur votre site, vos maquettes ou vos supports de communication.
Comment choisir les bonnes couleurs pour chaque rôle ?
Le plus simple est de partir de votre couleur de marque. Si votre logo contient déjà une couleur forte, elle n’a pas forcément vocation à occuper 60 % de l’interface. Une couleur vive fonctionne souvent mieux en accent, car elle attire naturellement l’oeil.
Pour la couleur dominante, privilégiez une teinte confortable. Elle doit soutenir le contenu sans prendre toute la place. Pour la couleur secondaire, cherchez une nuance capable de créer des sections claires. Pour l’accent, choisissez une couleur qui contraste suffisamment avec le reste de la palette.
Les harmonies de couleurs peuvent vous aider : complémentaires, analogues, monochromatiques ou triadiques. Adobe Color propose par exemple une roue chromatique pour construire une palette à partir d’une couleur de base. Ce type d’outil est utile pour générer des pistes, mais le test final doit toujours se faire sur votre support réel.
- Palette sobre : dominante claire, secondaire neutre, accent coloré.
- Palette premium : dominante sombre, secondaire profonde, accent métallique ou lumineux.
- Palette énergique : dominante claire, secondaire vive mais contrôlée, accent très visible.
- Palette éditoriale : dominante blanche ou crème, secondaire grise ou pastel, accent réservé aux liens et appels à l’action.
Comment appliquer la règle 60 30 10 sur un site web ?
Sur un site, la règle 60 30 10 doit soutenir la navigation et la conversion. Elle ne se limite pas à l’habillage graphique. Elle concerne aussi la lisibilité des textes, la perception des boutons, la cohérence entre les pages et la facilité de maintenance.
- Définissez vos surfaces principales : fond du site, en-tête, pied de page, sections, cartes et formulaires.
- Attribuez la couleur dominante aux grandes zones stables. Elle doit rendre la lecture agréable sur la durée.
- Attribuez la couleur secondaire aux éléments qui organisent la page : blocs alternés, encarts, fonds de section ou éléments graphiques.
- Attribuez la couleur d’accent aux actions prioritaires : demande de devis, ajout au panier, inscription, téléchargement ou contact.
- Vérifiez les contrastes : les WCAG indiquent notamment des seuils de contraste pour les textes afin d’améliorer l’accessibilité, dont 4,5:1 pour du texte normal au niveau AA et 3:1 pour du texte de grande taille.
- Préparez des variantes : survol, état actif, état désactivé, message d’erreur, succès, avertissement. Une palette web doit vivre dans l’interaction.
Si votre site actuel paraît incohérent ou daté, la couleur peut être un bon point de départ pour une refonte plus large. On peut alors travailler la palette, les composants, les gabarits et les parcours avec une approche globale de refonte de site internet. Pour une marque qui part de zéro ou qui change de positionnement, la couleur doit aussi s’accorder avec la création d’identité visuelle.
Quelles erreurs éviter avec la règle 60 30 10 ?
La première erreur consiste à choisir trois couleurs trop saturées. Si la dominante est agressive, les 60 % deviennent difficiles à supporter. Gardez les couleurs les plus fortes pour les zones qui doivent vraiment ressortir.
La deuxième erreur est de confondre accent et décoration. Une couleur d’accent doit signaler une priorité. Si elle sert aux titres, aux liens, aux boutons, aux pictogrammes, aux bordures, aux fonds et aux animations, elle perd sa valeur. L’accent doit rester rare.
La troisième erreur est d’oublier l’accessibilité. Une belle palette peut être inutilisable si le contraste entre le texte et son fond est trop faible. Testez les combinaisons importantes, surtout pour les boutons, les formulaires, les messages d’erreur et les textes sur image.
La quatrième erreur est de traiter toutes les pages de la même manière sans tenir compte de leur objectif. Une page institutionnelle peut être plus calme, tandis qu’une page d’inscription ou une page produit peut utiliser davantage l’accent sur les zones d’action. La règle reste la même, mais son application s’adapte au contexte.
Questions fréquentes
La règle 60 30 10 est-elle obligatoire ?
Non. C’est un repère pratique, pas une obligation. Elle aide surtout à éviter les palettes déséquilibrées et les interfaces où trop de couleurs se disputent l’attention.
Peut-on utiliser plus de trois couleurs ?
Oui, mais il vaut mieux conserver trois rôles principaux. Les variantes plus claires ou plus foncées peuvent compléter la palette pour les états, les fonds, les bordures ou les messages système.
Quelle couleur mettre dans les 10 % ?
Placez dans les 10 % la couleur qui doit attirer le regard. Sur un site, c’est souvent celle des boutons principaux, des liens importants ou des éléments d’action.
La règle 60 30 10 fonctionne-t-elle pour un logo ?
Elle est moins adaptée à la création d’un logo seul, car un logo doit rester lisible dans des formats très variés. En revanche, elle est utile pour décliner une identité visuelle autour du logo.
Comment créer une palette 60 30 10 rapidement ?
Choisissez une couleur de départ, générez des harmonies, puis attribuez les rôles. Vous pouvez utiliser notre outil gratuit de palette de couleurs, puis consulter les autres outils gratuits en ligne selon vos besoins.
