Générateur de palette de couleurs – Harmonies et variables CSS
Créez un ensemble harmonieux de cinq couleurs à partir d’une couleur de base ou au hasard. Verrouillez celles que vous aimez, régénérez le reste et copiez les HEX ou les variables CSS.
Choisissez une couleur de base et une harmonie — complémentaire, analogue, triadique, tétradique, complémentaire adjacente, monochrome ou nuances — ou Aléatoire. Appuyez sur Espace ou Générer pour de nouvelles idées, verrouillez les couleurs à garder et cliquez sur une pastille pour copier son code HEX. Les variables CSS sont prêtes à coller.
Comment utiliser : Générateur de palette de couleurs
- Choisissez une couleur de base, par exemple celle de votre marque.
- Choisissez une harmonie de couleurs.
- Appuyez sur Espace ou cliquez sur Générer pour voir des variantes.
- Verrouillez les couleurs qui vous plaisent avec le cadenas.
- Cliquez sur une pastille pour copier son HEX, ou copiez les variables CSS.
Comment fonctionnent les harmonies
Les harmonies de couleurs reposent sur des positions dans le cercle chromatique. Le générateur fait tourner la teinte de votre couleur de base et ajuste luminosité et saturation pour que les cinq couleurs aillent ensemble.
| Harmonie | Règle | Effet |
|---|---|---|
| Complémentaire | teinte opposée (180°) | contraste fort, énergique |
| Analogue | voisines (±30°) | calme, naturel |
| Triadique | trois teintes à 120° | vif mais équilibré |
| Tétradique | deux paires complémentaires | riche, demande une couleur dominante |
| Complémentaire adjacente | base + deux teintes voisines de l’opposée | contraste plus doux |
| Monochrome | une teinte, luminosités variées | sobre, élégant |
« Nuances » donne une gamme du clair au foncé d’une seule couleur, utile pour les boutons, bordures et états de survol. « Aléatoire » ignore la couleur de base et propose des associations agréables.
La règle 60-30-10
Une palette s’utilise mieux quand chaque couleur a un rôle. Utilisez une couleur pour environ 60 % du design (fonds), une deuxième pour 30 % (cartes, sections) et une couleur d’accent pour 10 % (boutons, liens). Les autres servent aux survols, bordures ou graphiques.
Contraste et accessibilité
Chaque pastille affiche son texte en noir ou en blanc, selon le plus lisible. Selon les règles WCAG, le texte courant doit atteindre un contraste d’au moins 4,5:1 avec son fond. Vérifiez vos paires finales texte/fond avec un vérificateur de contraste et convertissez le HEX en RGB avec l’outil Convertir HEX en RGB.
De la palette au code
Le bloc CSS liste vos couleurs sous forme de propriétés personnalisées comme --color-1. Collez-les dans votre feuille de style et utilisez var(--color-1) partout. Renommez-les ensuite selon leur rôle, comme --primaire ou --accent.
Conseils
- Partez de votre logo ou d’une photo produit et prenez sa couleur principale comme base.
- Verrouillez une couleur que vous adorez et régénérez jusqu’à ce que le reste convienne.
- Évitez le noir et le blanc purs ; des tons très foncés et très clairs sont plus doux.
- Testez la palette sur une vraie mise en page avant de la valider.
Tout fonctionne localement dans votre navigateur. Vous créez une icône dans vos nouvelles couleurs ? Essayez le Générateur de favicon.
Ces outils gratuits peuvent aussi vous être utiles : Formateur JSON, Générateur de mot de passe et Testeur de regex.
Questions fréquentes
Comment générer une palette de couleurs ?
Choisissez une couleur de base et une harmonie, puis appuyez sur Espace ou cliquez sur Générer. Verrouillez les couleurs qui vous plaisent et régénérez les autres.
Qu’est-ce qu’une harmonie complémentaire ?
Elle utilise des couleurs opposées sur le cercle chromatique, comme le bleu et l’orange, pour un contraste fort.
Comment copier une couleur ?
Cliquez sur une pastille pour copier son code HEX, ou copiez toutes les couleurs en variables CSS.
Puis-je garder certaines couleurs ?
Oui. Cliquez sur le cadenas d’une pastille ; les couleurs verrouillées restent quand vous en générez d’autres.
Les palettes sont-elles accessibles ?
L’outil affiche des couleurs de texte lisibles, mais vérifiez toujours que vos paires texte/fond atteignent 4,5:1.
Dernière mise à jour: