Quelles couleurs dominent cette image ? (palette depuis image)
Upload une photo / capture / maquette : l'outil extrait 4 à 12 couleurs dominantes en utilisant le clustering k-means avec initialisation k++ (plus intelligent que purement aléatoire).
Chaque couleur affiche sa part des pixels. Export en variables CSS, config Tailwind, JSON.
Tout en local : ton image ne quitte jamais le navigateur.
Parfait pour les audits de marque, les références de design, les mood boards.
Comment l'utiliser
- Upload une image : PNG, JPG, WebP, AVIF, HEIC. Le fichier est sous-échantillonné à 200×200 pixels max (pour que k-means tourne en environ 50 ms au lieu de 5 s sur une image 4K).
- Choisis un nombre de couleurs : 4 (juste les dominantes), 6 (équilibré), 8 (détaillé), 10 ou 12 (complémentaire).
- La barre du haut affiche la palette proportionnellement : échantillon plus large = plus de pixels. Clique pour copier le HEX.
- Le tableau « Détails » donne chaque couleur en 4 formats (HEX, RGB, HSL, OKLCH).
- Trois blocs d'export : variables CSS (à déposer dans `:root`), config Tailwind (à déposer dans `theme.extend.colors`), JSON (pour d'autres outils).
Quand c'est utile
Là où l'extracteur de palette paie, scénarios typiques :
- Audit de marque : upload logo / maquette, vérifie si tes couleurs sont cohérentes.
- Inspiration design : une belle photo de coucher de soleil → palette de 6 couleurs pour une landing page.
- Reverse-engineering : tu veux recréer la palette de quelqu'un d'autre : capture → extraction.
- Mood board : collecte d'images Pinterest, extraction d'une vibe de couleur partagée.
- Design web : une photo produit comme « couleur d'ancrage » pour toute la page.
- Design print : extraction depuis la photographie pour papier / emballage.
- Pédagogie : remarque comment une « photo blanc-et-bleu » contient en fait 30 % de gris, 25 % de bleu, 20 % de blanc : perceptuellement différent de comment elle apparaît.
Questions et réponses
K-means = algorithme de clustering : divise des points (ici : couleurs de pixels) en K groupes pour que chaque point soit proche de son centre. L'initialisation k++ (David Arthur 2007) choisit les centres initiaux pondérés par la distance : meilleur que purement aléatoire. 10 itérations de k-means donnent une palette stable (plus de change rarement quoi que ce soit de visible).