:root {
--color-1: #3b82f6;
--color-2: #f6af3b;
}Ce que ça fait
Le Générateur de palettes transforme n’importe quelle couleur de base en palette harmonieuse selon les règles classiques de la théorie des couleurs : complémentaire, split-complémentaire, analogique, triadique, tétradique et monochromatique. Choisissez une couleur, une harmonie, et obtenez un jeu de nuances prêt à l’emploi avec copie en un clic. Exportez la palette entière en variables CSS personnalisées, en extrait de configuration Tailwind, ou en JSON brut. Tout fonctionne 100 % côté client : rien ne quitte votre navigateur.
Comment l’utiliser
- Choisissez une couleur de base avec la pastille, ou tapez une valeur hex (p. ex.
#3B82F6) dans le champ texte. Cliquez sur Randomize pour tirer une nouvelle base. - Choisissez un schéma d’harmonie - Complement, Split-Complement, Analogous, Triadic, Tetradic, ou Monochromatic. Pour Monochromatic, réglez le nombre de Steps (2-9).
- Cliquez sur une nuance pour copier son hex - la valeur s’affiche directement sur la couleur, en noir ou blanc selon ce qui se lit le mieux.
- Dans le panneau Export, choisissez CSS / Tailwind / JSON et Copy export pour récupérer toute la palette d’un coup.
- Cliquez sur Copy link pour capturer une URL partageable - la couleur de base, le schéma et le nombre de pas sont encodés dans le lien, donc quiconque l’ouvre voit votre palette exacte.
Exemples
Palette complémentaire à partir du rouge
Base #FF0000 → [ #FF0000, #00FFFF ] - rouge et cyan, directement opposés sur le cercle.
Export Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
palette: {
'1': '#3b82f6',
'2': '#f59e0b',
},
},
},
},
};Export en variables CSS
:root {
--color-1: #3b82f6;
--color-2: #f59e0b;
}Bon à savoir
- Monochromatic conserve la teinte et la saturation de la base, répartissant la luminosité sur le nombre de pas choisi - parfait pour construire des échelles de tons d’interface.
- Privé : toute la génération se passe localement dans votre navigateur - sans risque pour les couleurs de marque propriétaires.
- Partageable : chaque palette a sa propre URL - couleur de base, harmonie et nombre de pas vivent dans le
hashhashA one-way function that maps data of any size to a fixed-length digest. Same input, same digest; any change, different digest; not reversible.
du lien, donc un marque-page ou un partage recharge la palette exacte. - Formats : l’hex est la source de vérité ; le HSL est affiché pour référence et utilisé en interne pour les calculs d’harmonie.
- Outils liés : cherchez les outils de dégradé et de contraste dans Color & Design.