La règle 60-30-10
C'est la règle la plus utile pour répartir les couleurs. Elle vient de la décoration d'intérieur, mais elle fonctionne pour tout projet.
- 60 % : couleur dominante. En général un neutre ou un ton doux. Elle couvre les fonds et les grandes surfaces.
- 30 % : couleur secondaire. Elle apporte de la personnalité. Utilisez-la pour des blocs, des menus ou des meubles.
- 10 % : couleur d'accent. La plus audacieuse. Utilisez-la pour les boutons, les icônes ou les détails.
Par exemple : blanc cassé à 60 %, bleu marine à 30 % et orange à 10 %.
Inutile de mesurer exactement. L'idée est qu'une couleur domine, qu'une autre l'accompagne et qu'une troisième ressorte.
Le rôle des neutres
Les neutres sont le blanc, le noir, le gris, le beige, le crème et les bruns clairs. Ils vont avec presque tout.
Ils reposent le regard et aident les couleurs fortes à ressortir. Une palette sans neutres est souvent fatigante.
- Blanc et blanc cassé : propreté et espace.
- Gris : moderne et sobre. Choisissez des gris chauds ou froids selon le reste de la palette.
- Beige et sable : chaleur et aspect naturel.
- Noir ou presque noir : élégance et contraste. Pour le texte, un gris très foncé est souvent plus agréable à lire que le noir pur.
Associer selon la température
Les couleurs se divisent en chaudes (rouges, orangés, jaunes) et froides (bleus, verts, violets). Il y a trois façons simples de les associer :
- Tout en chaud : chaleureux et énergique. Idéal pour les restaurants ou les marques conviviales.
- Tout en froid : calme et professionnel. Idéal pour la santé, la tech ou la finance.
- Base froide avec un accent chaud : l'option la plus polyvalente. L'accent chaud attire le regard sur un fond calme.
Ce qui échoue le plus souvent, c'est de mélanger beaucoup de couleurs chaudes et froides intenses à la fois, sans couleur dominante.
Le contraste pour le texte
Une belle couleur ne sert à rien si le texte ne se lit pas. Le contraste entre le texte et le fond est essentiel pour la lisibilité et l'accessibilité.
- Utilisez un texte foncé sur fond clair, ou un texte clair sur fond foncé.
- Évitez le texte jaune, vert clair ou gris clair sur du blanc.
- Évitez de superposer des complémentaires saturées, comme du rouge sur du vert. Elles vibrent et fatiguent les yeux.
- Les règles WCAG demandent un ratio minimal de 4,5:1 pour le texte normal et de 3:1 pour le grand texte.
Vous pouvez tester n'importe quelle paire de couleurs avec notre vérificateur de contraste.
15 combinaisons de couleurs qui marchent toujours
Ces paires sont des valeurs sûres pour commencer. Utilisez-les comme base et ajoutez un neutre ou un accent selon vos besoins.
- Bleu marine et crème : classique, sérieux et facile à lire.
- Noir et doré : luxe et élégance.
- Bleu et orange : complémentaires et pleins d'énergie.
- Vert forêt et beige : naturel et apaisant.
- Rose et gris anthracite : moderne et équilibré.
- Jaune et noir : contraste maximal, idéal pour les avertissements.
- Bordeaux et sable : chaleureux et raffiné.
- Turquoise et corail : frais et estival.
- Violet et lilas clair : monochrome et créatif.
- Marron et vert sauge : terreux, idéal pour les marques naturelles.
- Gris et pêche : doux et sympathique.
- Bleu pétrole et jaune pâle : calme avec une touche de lumière.
- Terracotta et blanc cassé : chaleureux et méditerranéen.
- Bleu canard et moutarde : rétro et plein de caractère.
- Blanc et rouge : direct, énergique et très visible.
Vous trouverez beaucoup d'autres idées, avec leurs codes HEX, sur notre page de combinaisons de couleurs.
Les couleurs qui vont avec chaque couleur
Si vous avez déjà une couleur principale, cette liste vous donne un point de départ rapide :
- Rouge : blanc, noir, gris, bleu marine et beige. Pour plus d'audace, rose ou orange.
- Orange : bleu marine, turquoise, blanc, crème et marron.
- Jaune : gris, noir, bleu marine et blanc. Le jaune moutarde va bien avec le vert foncé.
- Vert : beige, blanc, marron, doré et rose pâle.
- Bleu : blanc, orange, gris, jaune et corail. Le bleu marine fonctionne presque comme un neutre.
- Violet : gris, lilas, doré, vert sauge et blanc.
- Rose : gris, bleu marine, vert olive, blanc et doré.
- Marron : crème, vert, bleu pétrole, orange et blanc cassé.
Remarquez que les neutres apparaissent dans presque toutes les listes. C'est la façon la plus sûre d'accompagner une couleur forte.
Comment créer votre propre combinaison
- Choisissez une couleur principale selon ce que vous voulez transmettre.
- Cherchez une couleur secondaire sur le cercle chromatique : une voisine pour un effet calme, une opposée pour un effet frappant.
- Ajoutez un ou deux neutres.
- Gardez une seule couleur d'accent pour l'essentiel.
- Testez la palette sur un exemple réel : une page web, une diapositive ou une photo de la pièce.
En cas de doute, utilisez moins de couleurs. Trois à cinq couleurs suffisent pour presque tous les projets.
Les erreurs courantes avec les couleurs
- Utiliser trop de couleurs. Le résultat paraît désordonné et rien ne ressort.
- Donner le même poids à toutes les couleurs. Sans couleur dominante, l'œil ne sait pas où regarder.
- Oublier le contraste. Des textes illisibles ou des boutons que personne ne voit.
- Tout saturer. Les couleurs très vives fatiguent. Associez-les à des tons plus doux.
- Ignorer le contexte. Une couleur change à la lumière du jour, à l'écran ou à l'impression.
- Copier sans adapter. Une palette qui marche pour une marque ne convient pas forcément à votre public.
- Mélanger des neutres de températures différentes. Un gris froid à côté d'un beige chaud peut paraître sale. Choisissez des neutres de la même famille.
- Ne pas tester sur plusieurs écrans. Une couleur peut être superbe sur votre ordinateur et terne sur un téléphone. Vérifiez toujours sur plus d'un appareil.