Créer une palette de couleurs : harmonies, règle 60-30-10 et contraste

Pourquoi une palette compte

Les couleurs sont la première chose que l'on remarque sur un site, un logo ou une présentation — avant même de lire un mot. Une palette cohérente donne une image professionnelle et reconnaissable ; un mélange de couleurs au hasard donne une impression d'improvisation, même quand le contenu est excellent.

Bonne nouvelle : pas besoin d'être designer. Les harmonies de couleurs reposent sur des règles géométriques simples sur le cercle chromatique.

Les principales harmonies de couleurs

Harmonie	Principe	Effet	Idéale pour
Monochromatique	Nuances d'une seule teinte	Calme, élégant, très cohérent	Sites minimalistes, documents d'entreprise
Analogue	2 à 4 teintes voisines sur le cercle	Naturel, apaisant	Nature, bien-être, photographie
Complémentaire	Deux teintes opposées	Contraste fort, énergique	Boutons d'action, sport, promotions
Triadique	Trois teintes à intervalles réguliers (120°)	Vif et équilibré	Marques pour enfants, projets créatifs
Tétradique	Deux paires de complémentaires	Riche, difficile à équilibrer	Illustrations, interfaces complexes

Générer une palette en quelques secondes

Le générateur de palettes crée des harmonies à partir de n'importe quelle couleur de base : complémentaire, analogue, triadique, tétradique et monochromatique.

• Cliquez sur une pastille pour copier son code HEX ; chaque couleur affiche aussi ses valeurs RGB et HSL.
• Exportez en CSS : l'outil génère un bloc :root avec des variables (--color-1, --color-2…) prêt à coller dans votre feuille de style.
• Tout est calculé dans votre navigateur.

Besoin de trouver la couleur de base ? Prélevez-la dans une image (photo de votre boutique, votre logo) avec la pipette d'image, ou affinez-la avec le sélecteur de couleur.

La règle du 60-30-10

Choisir les couleurs n'est que la moitié du travail ; il faut aussi les doser. La règle du 60-30-10, empruntée à la décoration d'intérieur, fonctionne très bien à l'écran :

• 60 % — une couleur dominante et neutre : fonds, grandes surfaces (souvent blanc, blanc cassé ou une couleur très sombre).
• 30 % — une couleur secondaire : en-têtes, cartes, sections.
• 10 % — une couleur d'accent : boutons, liens, éléments importants.

La couleur d'accent est celle qui doit attirer l'œil. Si elle est partout, elle n'attire plus rien.

N'oubliez pas le contraste

Une belle palette ne sert à rien si le texte est illisible. Les règles d'accessibilité WCAG définissent des ratios de contraste minimums entre texte et fond :

Élément	Ratio minimum (niveau AA)
Texte normal	4,5 : 1
Grand texte (24 px et plus, ou 19 px en gras)	3 : 1
Composants d'interface, icônes	3 : 1

Un texte jaune pâle sur blanc ou gris moyen sur gris clair ne passe presque jamais. Vérifiez vos couples texte / fond avant de valider la palette.

Conseils pour une palette professionnelle

1. Limitez-vous à 3 à 5 couleurs, plus des neutres (blanc, gris, quasi-noir).
2. Évitez le noir pur (#000000) pour le texte : un gris très foncé ou un bleu nuit est plus doux à lire.
3. Prévoyez des variantes claires et foncées de chaque couleur pour les survols, bordures et fonds.
4. Testez sur du vrai contenu : une palette superbe en pastilles peut fatiguer sur une page entière.
5. Notez vos codes : gardez vos valeurs HEX et variables CSS au même endroit pour les réutiliser partout (site, présentations, réseaux sociaux).

Conclusion

Une bonne palette part d'une couleur, suit une règle d'harmonie, se dose avec la règle du 60-30-10 et respecte le contraste. Avec un générateur qui exporte directement en CSS, vous passez d'une idée à une palette utilisable en quelques minutes.