D’où sort cette règle des 60/30/10 ? (Et pourquoi elle n’a rien d’une recette magique)
On la présente souvent comme une loi immuable du design, un peu comme la règle des tiers en photographie. Sauf que contrairement à ce qu’on lit partout, elle n’a pas été inventée par un gourou du design dans les années 2000. Ses origines remontent aux principes de composition classiques – ceux qu’utilisaient déjà les peintres de la Renaissance pour équilibrer leurs toiles. Le 60/30/10 n’est qu’une version simplifiée (et modernisée) de ces idées.
Le principe ? Répartir les couleurs d’un projet selon ces proportions :
60% pour la couleur dominante – celle qui donne le ton général, comme les murs d’une pièce ou le fond d’un site.
30% pour la couleur secondaire – celle qui structure, qui guide le regard, comme les meubles ou les boutons d’une interface.
10% pour la touche d’accent – la couleur qui surprend, qui attire l’attention, comme un coussin rouge dans un salon beige ou un call-to-action percutant.
Pourtant, ce qui intrigue, c’est que cette règle fonctionne… même quand on la bouscule. Un designer expérimenté vous dira que le vrai secret n’est pas dans les pourcentages, mais dans la hiérarchie qu’ils créent. Et c’est là que ça se corse : parce que si on applique cette règle sans réfléchir, on obtient des résultats aussi plats qu’un PowerPoint des années 90.
Pourquoi 60/30/10 et pas 70/20/10 ou 50/30/20 ?
La réponse tient en un mot : équilibre. Des études en psychologie de la perception (comme celles menées par le chercheur Albert Munsell au début du XXe siècle) montrent que notre cerveau a besoin d’une dominance claire pour ne pas se sentir submergé. 60% d’une couleur, c’est assez pour créer une base rassurante, mais pas trop pour éviter la monotonie. Les 30% viennent casser cette uniformité sans la détruire, tandis que les 10% servent de ponctuation visuelle.
Sauf que – et c’est là que les choses deviennent intéressantes – ces proportions ne sont pas gravées dans le marbre. Certains projets nécessitent plus de contraste, d’autres plus de subtilité. Le vrai défi, c’est de comprendre pourquoi ces chiffres marchent, pour pouvoir les adapter sans tout casser.
Comment appliquer la règle des 60/30/10 sans tomber dans le piège des couleurs "parfaites"
On a tous vu ces palettes de couleurs "parfaites" sur Pinterest ou Canva, avec leurs jolis cercles chromatiques et leurs noms évocateurs ("Ocean Breeze", "Autumn Leaves"). Le problème, c’est que ces palettes sont souvent conçues pour être esthétiques… en théorie. En pratique, elles oublient un détail crucial : le contexte.
Prenons un exemple concret. Vous concevez un site pour un restaurant italien. Vous choisissez une palette "rustique" avec du rouge tomate (60%), du beige (30%) et du vert olive (10%). Sur le papier, ça sonne bien. Mais une fois en ligne, le rouge domine trop, le beige se fond dans le fond blanc du site, et le vert olive passe inaperçu. Résultat : une ambiance visuelle qui évoque plus un fast-food qu’une trattoria authentique.
Étape 1 : Choisir la bonne couleur dominante (et ce n’est pas toujours celle qu’on croit)
La couleur à 60% ne doit pas forcément être la plus voyante. Au contraire, elle doit servir de toile de fond, presque invisible. Dans le design d’intérieur, c’est souvent une teinte neutre – blanc cassé, gris clair, taupe. En graphisme, ça peut être une couleur pastel ou une teinte désaturée.
Le piège ? Croire que "neutre" signifie "ennuyeux". Un blanc pur, par exemple, peut sembler froid et clinique. Un beige trop jaune donne un effet vieillot. La solution ? Jouer avec les nuances. Un blanc chaud (#F5F5F5) fonctionne mieux qu’un blanc glacé (#FFFFFF) pour un site e-commerce. Un gris bleuté (#E5E7EB) apporte plus de modernité qu’un gris standard (#CCCCCC).
Et si vous voulez sortir des sentiers battus ? Essayez une couleur dominante inattendue, mais désaturée. Un bleu pétrole très atténué pour un site de finance, par exemple. Ou un vert sauge pour un blog sur le bien-être. L’astuce, c’est de garder 60% de cette teinte, mais en jouant sur les variations de saturation et de luminosité pour éviter la monotonie.
Étape 2 : La couleur secondaire, ce héros méconnu du design
Les 30% de couleur secondaire sont souvent négligés, alors qu’ils jouent un rôle clé : créer du contraste sans agresser. Dans une interface utilisateur, c’est la couleur des boutons secondaires, des bordures, des icônes. En décoration, ce sont les meubles, les rideaux, les tapis.
Le danger ici, c’est de choisir une couleur trop proche de la dominante. Un bleu clair à 60% avec un bleu moyen à 30% ? Ça donne un effet fade, comme un ciel sans nuages. À l’inverse, une couleur trop contrastée (un rouge vif à 30% avec un vert à 60%) peut créer une disharmonie visuelle, comme ces logos de supermarchés des années 80.
La solution ? Utiliser la roue chromatique pour trouver des couleurs complémentaires ou analogues, mais en ajustant leur saturation. Par exemple, si votre dominante est un bleu-gris (#6B8CAE), une bonne couleur secondaire pourrait être un beige rosé (#D4B896) – assez différent pour créer du contraste, mais assez proche pour rester harmonieux.
Étape 3 : La touche d’accent, ou comment éviter le syndrome du "trop c’est trop"
Les 10% de couleur d’accent sont à la fois la partie la plus simple et la plus délicate. Simple, parce que c’est souvent la seule couleur vive du projet. Délicate, parce qu’un mauvais choix peut tout gâcher.
Prenons l’exemple d’un site vitrine pour un photographe. La dominante est un gris chaud (#F0F0F0), la secondaire un bleu nuit (#2C3E50). Pour les accents, on choisit un jaune vif (#FFD700) pour les boutons "Contact" et les liens. Sur le papier, ça semble équilibré. En réalité, le jaune attire trop l’attention, au point de voler la vedette aux photos – le vrai cœur du site.
Le problème, c’est que les couleurs vives ont un pouvoir d’attraction disproportionné. Un rouge à 10% peut sembler plus présent qu’un bleu à 30%. Pour éviter ça, deux options :
1. Désaturer la couleur d’accent. Un rouge corail (#FF7F50) au lieu d’un rouge pur (#FF0000).
2. Limiter son usage. Plutôt que de l’appliquer à tous les éléments interactifs, réservez-la à un seul point focal – un bouton "Acheter maintenant", une icône clé, une citation mise en avant.
(Et si vous voulez vraiment jouer avec les limites, essayez une couleur d’accent inattendue. Un violet profond pour un site de sport, un orange brûlé pour un blog littéraire. Ça marche… à condition de garder les 90% restants sobres.)
60/30/10 en pratique : trois cas concrets où ça marche (et un où ça échoue lamentablement)
Cas 1 : Un site e-commerce qui convertit (sans faire mal aux yeux)
Prenons le site d’une marque de montres minimalistes. La dominante (60%) est un blanc cassé (#F8F8F8), assez chaud pour éviter l’effet "hôpital". La secondaire (30%) est un gris anthracite (#333333) pour le texte, les bordures et les icônes. L’accent (10%) ? Un bleu électrique (#0066FF) réservé aux boutons "Ajouter au panier" et aux prix en promotion.
Pourquoi ça marche ? Parce que la hiérarchie est claire : le blanc guide l’œil vers les produits, le gris structure l’information, et le bleu attire vers l’action. Aucun élément ne concurrence un autre. Et surtout, la couleur d’accent est utilisée avec parcimonie – juste assez pour créer de l’urgence, sans agresser.
Le détail qui change tout ? Les ombres portées. En ajoutant une légère ombre sous les boutons bleus, on renforce leur caractère "cliquable", sans avoir besoin d’une couleur plus agressive.
Cas 2 : Une affiche événementielle qui ne passe pas inaperçue
Imaginez une affiche pour un festival de jazz. La dominante (60%) est un noir profond (#121212), pour évoquer l’ambiance intimiste des clubs. La secondaire (30%) est un or vieilli (#D4AF37), utilisé pour les titres et les éléments graphiques. L’accent (10%) ? Un rouge bordeaux (#800020) pour les dates et le call-to-action "Billets en vente".
Ici, la règle des 60/30/10 sert un double objectif : créer une identité visuelle forte (noir et or = luxe, sophistication) tout en guidant le regard vers les informations essentielles. Le rouge, bien que présent à seulement 10%, capte immédiatement l’attention grâce à son contraste avec le fond noir.
Le piège évité ? L’or, bien que dominant à 30%, est utilisé en aplats et en textures plutôt qu’en grandes surfaces uniformes. Résultat : il apporte du luxe sans tomber dans le kitsch.
Cas 3 : Un logo qui résiste au temps (et aux modes)
Le logo de Spotify est un excellent exemple de 60/30/10 appliqué à la perfection. Le vert (#1DB954) représente 60% de la surface, mais il est désaturé et utilisé en dégradé pour éviter la monotonie. Le noir (#191414) structure les éléments (le "S" et les vagues) à 30%. Enfin, le blanc (#FFFFFF) sert d’accent à 10%, pour les espaces négatifs et les détails.
Pourquoi c’est brillant ? Parce que le vert, bien que dominant, n’écrase pas les autres éléments. Le noir apporte du contraste sans agresser, et le blanc donne de la légèreté. Résultat : un logo qui fonctionne aussi bien sur un fond blanc que sur un fond coloré, et qui reste lisible même en petit format.
Cas 4 : Quand la règle des 60/30/10 échoue (et pourquoi)
Prenons l’exemple d’un site pour une agence de voyage spécialisée dans les safaris. Le designer choisit une palette "nature" : vert forêt (60%), marron terre (30%) et orange vif (10%) pour les accents. Sur le papier, ça semble cohérent. En pratique, c’est un désastre.
Pourquoi ? Parce que les trois couleurs sont trop proches en saturation et en luminosité. Le vert et le marron se confondent, et l’orange, bien que vif, se noie dans la masse. Pire, l’orange est utilisé pour les boutons "Réserver", mais comme il n’y a pas assez de contraste avec le fond vert, ils passent inaperçus.
La leçon ? La règle des 60/30/10 ne suffit pas si on ne tient pas compte de la perception réelle des couleurs. Deux teintes peuvent sembler différentes sur un nuancier, mais identiques à l’écran. Pour éviter ça, testez toujours vos palettes dans des conditions réelles : sur différents écrans, en impression, et surtout, en situation d’usage (un bouton doit sauter aux yeux, pas se fondre dans le décor).
Les erreurs qui tuent l’harmonie (et comment les éviter sans devenir fou)
Erreur n°1 : Croire que les pourcentages s’appliquent littéralement
On voit souvent des débutants mesurer méticuleusement chaque pixel pour respecter les 60/30/10. Sauf que dans la vraie vie, ces chiffres sont des guides, pas des dogmes. Un site avec 58% de blanc, 32% de gris et 10% de bleu reste harmonieux. Ce qui compte, c’est la hiérarchie visuelle, pas la précision mathématique.
Le vrai problème, c’est quand on force les proportions. Par exemple, réduire une couleur d’accent à 5% parce que "10%, c’est trop". Résultat : elle devient invisible, et tout l’équilibre s’effondre. À l’inverse, augmenter une couleur secondaire à 40% parce qu’on l’aime bien, c’est prendre le risque de créer un déséquilibre.
Erreur n°2 : Oublier la texture et la matière
Une couleur n’est pas qu’une teinte plate. En design d’intérieur, un mur peint en bleu à 60% n’aura pas le même impact qu’un mur en pierre apparente teintée de bleu. En graphisme, un dégradé de gris à 30% apporte plus de profondeur qu’un gris uni.
Pourtant, beaucoup de designers négligent cet aspect. Ils choisissent des couleurs "parfaites" sur Adobe Color, mais oublient que dans la vraie vie, ces couleurs interagissent avec la lumière, les ombres, et les matériaux. La solution ? Toujours tester vos palettes dans des mockups réalistes. Un bouton bleu sur un fond blanc en JPG n’aura pas le même rendu qu’un bouton bleu sur un fond texturé en PNG.
Erreur n°3 : Négliger l’accessibilité
Une palette peut respecter la règle des 60/30/10 et être illisible pour 20% de la population. C’est le cas des combinaisons comme vert clair sur blanc (problème pour les daltoniens) ou gris moyen sur gris foncé (problème pour les malvoyants).
Pour éviter ça, utilisez des outils comme WebAIM Contrast Checker ou Coolors pour vérifier le contraste entre vos couleurs. Une bonne règle de base : le texte doit toujours avoir un ratio de contraste d’au moins 4,5:1 avec son fond. Et si vous utilisez des couleurs vives, assurez-vous qu’elles restent lisibles en niveaux de gris (certains daltoniens ne perçoivent pas les couleurs, seulement les contrastes).
Erreur n°4 : Copier sans comprendre
On a tous vu ces articles qui listent "10 palettes 60/30/10 parfaites pour 2024". Le problème, c’est que ces palettes sont souvent conçues pour des cas d’usage très spécifiques – un blog de voyage, une boutique de mode, un portfolio de photographe. Les appliquer à votre projet sans adaptation, c’est comme porter un costume trois tailles trop grand : ça ressemble à quelque chose, mais ça ne vous va pas.
Prenons l’exemple d’une palette "minimaliste" avec du blanc (60%), du noir (30%) et du rouge (10%). Parfaite pour un site de design, catastrophique pour un site médical (le rouge évoque la danger, pas la confiance). La solution ? S’inspirer des palettes existantes, mais les adapter à votre contexte. Et surtout, comprendre pourquoi elles marchent, pour pouvoir les modifier intelligemment.
60/30/10 vs autres règles de design : laquelle choisir (et quand les ignorer toutes)
La règle des tiers : l’alliée inattendue du 60/30/10
La règle des tiers, bien connue des photographes, consiste à diviser une image en neuf parties égales avec deux lignes horizontales et deux lignes verticales. Les points d’intersection sont des zones de force où placer les éléments clés.
En design, on peut combiner cette règle avec le 60/30/10 pour créer des compositions encore plus dynamiques. Par exemple, placer la couleur dominante (60%) dans les zones périphériques, la secondaire (30%) le long des lignes de force, et l’accent (10%) sur un point d’intersection. Résultat : une harmonie visuelle qui guide naturellement le regard.
Le piège ? Vouloir appliquer les deux règles à la lettre. Parfois, une composition asymétrique fonctionne mieux qu’un alignement parfait. L’important, c’est de savoir quand suivre les règles… et quand les plier.
Le cercle chromatique : l’outil qui rend le 60/30/10 obsolète ?
Certains designers préfèrent s’appuyer uniquement sur le cercle chromatique pour créer des palettes harmonieuses. Les combinaisons complémentaires (couleurs opposées), analogues (couleurs voisines) ou triadiques (trois couleurs équidistantes) offrent une approche plus "scientifique" que le 60/30/10.
Pourtant, ces méthodes ont leurs limites. Une palette triadique peut sembler équilibrée sur le papier, mais déséquilibrée en pratique si une couleur domine trop. À l’inverse, le 60/30/10 apporte une structure claire, même avec des couleurs qui ne sont pas "parfaitement" harmonieuses selon le cercle chromatique.
La solution ? Utiliser les deux. Le cercle chromatique pour choisir des couleurs qui s’accordent, et le 60/30/10 pour les répartir de manière équilibrée.
Le flat design et le material design : quand les règles changent
Dans le flat design (popularisé par Apple et Google), les couleurs sont souvent utilisées en aplats, sans ombres ni dégradés. Ici, la règle des 60/30/10 reste pertinente, mais avec une nuance : les 10% d’accent doivent être encore plus percutants, car ils n’ont pas de profondeur pour les mettre en valeur.
Le material design, en revanche, joue avec les ombres, les superpositions et les animations pour créer de la hiérarchie. Dans ce cas, les 60/30/10 peuvent être adaptés : 60% pour les fonds et les surfaces principales, 30% pour les éléments en relief (cartes, boutons), et 10% pour les interactions (survol, clic).
Le point commun ? Dans les deux cas, la règle des 60/30/10 sert de base, mais c’est l’usage des textures et des effets qui fait la différence.
Questions fréquentes (celles qu’on n’ose pas poser en réunion)
Peut-on utiliser plus de trois couleurs avec la règle des 60/30/10 ?
Oui, mais avec prudence. L’idée n’est pas d’ajouter des couleurs au hasard, mais de les intégrer dans les trois catégories existantes. Par exemple, vous pouvez avoir deux couleurs dominantes à 30% chacune (au lieu d’une seule à 60%), une couleur secondaire à 30%, et deux couleurs d’accent à 5% chacune. L’important, c’est de garder une hiérarchie claire : une ou deux couleurs doivent toujours dominer, les autres doivent rester discrètes.
Un bon exemple ? Le site d’Airbnb. Le blanc et le gris clair dominent (60%), le bleu et le rose structurent (30%), et le rouge et le vert servent d’accents (10%). Résultat : une palette riche, mais équilibrée.
La règle des 60/30/10 fonctionne-t-elle pour les logos ?
Absolument, mais avec une nuance. Dans un logo, les proportions ne sont pas toujours mesurables en pourcentage, car les éléments sont souvent de tailles différentes. L’astuce, c’est d’appliquer la règle de manière qualitative : une couleur doit dominer visuellement (même si elle n’occupe pas 60% de la surface), une autre doit structurer, et la dernière doit attirer l’attention.
Prenez le logo de McDonald’s. Le rouge domine (même s’il n’occupe pas 60% de l’espace), le jaune structure (les arches), et le blanc sert d’accent (le texte). Le résultat est instantanément reconnaissable, sans être agressif.
Comment adapter la règle des 60/30/10 pour un site en mode sombre ?
Le mode sombre inverse les règles du jeu. Dans un design clair, les couleurs vives attirent l’attention. Dans un design sombre, ce sont les couleurs claires qui ressortent. Du coup, la règle des 60/30/10 doit être adaptée :
- 60% : une couleur sombre (noir, bleu nuit, vert foncé) pour le fond.
- 30% : une couleur moyenne (gris, bleu-gris) pour les éléments structurants.
- 10% : une couleur claire (blanc, jaune pâle) pour les accents.
Le piège ? Utiliser du blanc pur (#FFFFFF) pour les accents. Sur un fond noir, ça crée un effet de halo désagréable. Préférez un blanc cassé (#F0F0F0) ou un jaune très pâle (#FFFFE0).
Est-ce que la règle des 60/30/10 marche pour les photos et les illustrations ?
Oui, mais de manière indirecte. Dans une photo ou une illustration, les couleurs sont souvent déterminées par le sujet (un coucher de soleil, un portrait, un paysage). Impossible d’appliquer des pourcentages précis. En revanche, vous pouvez utiliser la règle pour équilibrer les couleurs dans une composition.
Par exemple, si vous retouchez une photo de paysage, vous pouvez :
- Désaturer légèrement les couleurs dominantes (ciel, herbe) pour qu’elles occupent "visuellement" 60% de l’image.
- Renforcer une couleur secondaire (un arbre, un bâtiment) pour qu’elle structure la composition (30%).
- Ajouter une touche d’accent (un oiseau rouge, un détail coloré) pour attirer le regard (10%).
L’outil idéal pour ça ? Les calques de réglage dans Photoshop ou Lightroom, qui permettent d’ajuster les couleurs sans altérer l’image originale.
Verdict : la règle des 60/30/10 est-elle une révolution ou un gadget ?
Si vous cherchez une formule magique pour créer des designs parfaits, vous allez être déçu. La règle des 60/30/10 n’est ni révolutionnaire ni infaillible. C’est un outil, rien de plus. Un outil puissant, certes, mais qui ne remplace pas le jugement, l’expérience, et surtout, le bon sens.
Son vrai mérite ? Elle force à réfléchir à la hiérarchie des couleurs. À se demander : "Quelle couleur doit dominer ? Laquelle doit guider ? Laquelle doit surprendre ?" Sans elle, on a tendance à choisir des palettes au feeling, en espérant que ça marche. Avec elle, on construit des designs qui respirent, qui communiquent, et qui ne fatiguent pas l’œil.
Alors, faut-il l’appliquer à la lettre ? Non. Faut-il la connaître ? Absolument. Parce qu’une fois qu’on a compris pourquoi elle fonctionne, on peut la tordre, la plier, voire l’ignorer… tout en gardant ses bénéfices.
Et si vous ne deviez retenir qu’une chose ? C’est ça : le design, ce n’est pas une science exacte. C’est un mélange de règles, d’intuition, et de tests. La règle des 60/30/10 n’est qu’un point de départ. Le reste, c’est à vous de jouer.
(Et si jamais vous vous plantez, rappelez-vous : même les plus grands designers ont leurs ratés. La différence, c’est qu’ils savent les corriger avant que personne ne les voie.)