Palette de Couleurs depuis une Image
Extrayez des palettes de couleurs de n'importe quelle image — obtenez des codes HEX, RGB, HSL et exportez en CSS variables, Tailwind, JSON ou PNG. 100% dans...
Mis à jour mai 2026
Vérifié par Rafael Duarte
Comment extraire les couleurs d'une image
De la photo à la palette prête pour la production
1. Importez votre image
Glissez un fichier JPG, PNG, WebP, GIF ou SVG, ou collez l'URL d'une image publique.
2. Choisissez le nombre de couleurs
Entre 3 et 12 — 6 est un bon réglage par défaut pour la plupart des cas.
3. Copiez ou exportez
Cliquez sur une nuance pour le code HEX, ou exportez en CSS, Tailwind, JSON ou DESIGN.md.
Ce que fait cet outil
Clustering K-means, pas une simple moyenne
Extraction par clustering perceptuel
K-means regroupe les pixels visuellement similaires — pas une moyenne brouillée de couleurs.
Initialisation K-means++
Des points de départ plus intelligents garantissent des résultats stables d'une exécution à l'autre.
5 formats d'export
Variables CSS, configuration Tailwind, JSON, DESIGN.md et carte PNG de nuances.
100 % dans le navigateur
Traitement via Canvas API — vos images privées et assets de marque ne quittent jamais l'appareil.
Raccourci clavier pour exporter
Appuyez sur Shift+Entrée n'importe où sur la page pour copier l'onglet d'export actif sans quitter le clavier.
Nomenclature sémantique des rôles dans DESIGN.md
Chaque couleur exportée dans DESIGN.md reçoit déjà un nom de rôle (primary, secondary, accent, neutral...) prêt à devenir un design token, sans travail manuel.
Exemples d'utilisation
Quand vous allez utiliser cet outil
Les scénarios les plus courants chez les utilisateurs
Identité de marque à partir du logo
Extrayez 4 à 6 couleurs et documentez-les avec un HEX précis pour vos brand guidelines et Figma.
Web design et développement
Exportez directement en configuration Tailwind extend.colors sans sélectionner les couleurs à la main.
Photographie et mood boards
Extrayez la palette exacte de l'ambiance colorée d'une photo de référence.
Design d'intérieur et matériaux
Obtenez des valeurs de couleur exactes à partir d'une photo d'ambiance pour assortir des peintures.
Cohérence sur les réseaux sociaux
Extrayez la palette de vos publications les plus performantes pour garder un feed Instagram ou un contenu de marque visuellement cohérent.
Erreurs courantes
Confondre couleur dominante et couleur moyenne
La dominante est la plus visuellement proéminente par clustering ; la moyenne est mathématique et produit un ton brouillé non représentatif.
Utiliser une image trop petite
Pour de meilleurs résultats, utilisez des images d'au moins 200×200 pixels.
Demander trop de couleurs pour un logo simple
4 à 6 couleurs couvrent déjà la plupart des identités visuelles — en demander 12 peut inclure du bruit non pertinent.
URL d'image bloquée par CORS
Tous les domaines n'autorisent pas la lecture des pixels depuis le navigateur. Si l'extraction par URL échoue, téléchargez l'image et importez le fichier directement.
S'attendre à ce que le fond transparent compte comme une couleur
Les pixels transparents sont ignorés lors du clustering — une image avec beaucoup de zones transparentes peut retourner moins de variété de couleurs que prévu.
Pourquoi utiliser cet outil
K-means surpasse des approches plus simples comme le median cut car il trouve des clusters perceptuellement significatifs, pas des découpages arbitraires de l'espace colorimétrique.
C'est le seul outil de la catégorie à exporter directement au format DESIGN.md, la spécification open source utilisée par les assistants de code IA comme Claude Code et Cursor.
L'extraction s'exécute en quelques millisecondes directement dans le navigateur via l'API Canvas — sans upload, sans inscription et sans limite d'usage. Dans l'export DESIGN.md, chaque couleur arrive déjà avec un nom de rôle sémantique (primary, secondary, accent...) prêt à devenir un design token, ce qui évite de nommer chaque variable à la main.
Couleur dominante vs. couleur moyenne
Pourquoi K-means fait la différence
Questions fréquentes
Importez votre image — l'extraction s'exécute entièrement dans le navigateur grâce au clustering K-means et renvoie les couleurs dominantes en HEX, RGB et HSL en quelques millisecondes.
Ressources
Documentation de l'API Canvas utilisée pour le traitement des pixels.
Explication de l'algorithme K-means et de son application à la quantification des couleurs.
Spécification open source pour les fichiers de design system lisibles par les machines.
Outils connexes
- Générateur de Palette de Couleurs Design Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...
- Vérificateur de Contraste de Couleurs Design Vérificateur de contraste de couleurs gratuit — vérifiez la conformité WCAG 2.2 AA et AAA instantanément. Aperçu en direct, simulation du daltonisme et...
- Convertisseur de Couleurs Design Convertissez des couleurs entre HEX, RVB, HSL et CMJN instantanément. Sélecteur de couleur gratuit avec vérificateur de contraste WCAG et générateur de palette.
- Générateur CSS Box Shadow — Neumorphisme, Glassmorphisme et Tailwind Design Générateur CSS box shadow gratuit avec aperçu en temps réel. Créez des ombres, effets neumorphisme et glassmorphisme. Exportez en CSS, Tailwind ou variables CSS.
- Générateur CSS Flexbox Design Générateur CSS Flexbox gratuit : aperçu live, CSS et Tailwind simultanément, 10 layouts prédéfinis, avertissements contextuels et export React/JSX. Sans inscription.
