Générateur de palette de couleurs
Extrayez les couleurs d’une image ou composez des harmonies.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Cliquez sur une couleur pour copier son code
Une palette professionnelle en quelques secondes
Toute identité visuelle commence par une palette. Deux chemins y mènent : partir d’une image qui porte déjà l’ambiance recherchée (photo, moodboard, capture) et en extraire les couleurs dominantes, ou partir d’une couleur de marque et construire ses harmonies selon la théorie des couleurs.
-
Image → palette
Déposez l’image : l’algorithme k-means regroupe les pixels et révèle les 6 couleurs dominantes avec leur poids.
-
Couleur → harmonies
Choisissez votre couleur de base : complémentaire, analogues, triade et nuances se génèrent instantanément.
-
Exportez
Cliquez sur une couleur pour copier son code, ou copiez tout le bloc CSS variables / Tailwind.
Les harmonies en bref
| Harmonie | Construction | Effet |
|---|---|---|
| Complémentaire | 2 couleurs à 180° | Contraste maximal, énergie |
| Analogues | 3 couleurs à ±30° | Douceur, cohérence naturelle |
| Triadique | 3 couleurs à 120° | Équilibre vif et coloré |
| Nuances | Même teinte, 5 clartés | Profondeur monochrome, hiérarchie |
Règle des 60-30-10 : environ 60 % de couleur dominante, 30 % de secondaire, 10 % d’accent. Vérifiez aussi le contraste texte/fond avec notre vérificateur WCAG.
Questions fréquentes
Comment les couleurs sont-elles extraites de l’image ?
Par un algorithme de classification k-means exécuté dans votre navigateur : les pixels sont regroupés en 6 familles de couleurs proches, et le centre de chaque famille devient une couleur de la palette, triée par importance (pourcentage de l’image).
Qu’est-ce qu’une couleur complémentaire ?
La couleur diamétralement opposée sur le cercle chromatique (à 180°). Le duo crée le contraste le plus fort : idéal pour faire ressortir un bouton d’appel à l’action sur un fond.
Analogues, triade : quand les utiliser ?
Les analogues (±30°) donnent des ambiances douces et cohérentes — parfaites pour des arrière-plans. La triade (3 couleurs à 120°) offre un équilibre vivant : une dominante, deux accents.
Comment utiliser l’export CSS ?
Le bloc généré contient des variables CSS (--color-1, --color-2…) à coller dans votre :root, et l’équivalent pour la config Tailwind. Renommez les variables selon leur rôle (--primary, --accent…) pour un code plus lisible.
Mon image est-elle envoyée quelque part ?
Non : l’analyse k-means tourne entièrement dans votre navigateur sur une miniature de l’image. Rien n’est transmis, même pour les grandes photos.