Color Palette Extractor
Drop an image, get its dominant colors. Export as HEX, RGB, HSL, CSS variables, Tailwind config or JSON. Powered by k-means clustering — runs entirely in your browser.
Drop an image, click to browse, or Ctrl/Cmd + V to paste
PNG, JPG, WebP, GIF — anything your browser can decode
From a photo to a complete brand palette in seconds
Designers, web developers and brand professionals constantly need to extract colors from reference images — a competitor's website, a mood-board photo, a screenshot, a logo, a piece of art. This tool does it instantly with k-means clustering, the same algorithm used by Adobe Color and similar professional tools.
Comment ça fonctionne
K-means is a classic clustering algorithm: it groups similar pixels together and finds the "center" (average color) of each group. We sample up to 20,000 pixels from your image (more than enough — visually indistinguishable from analyzing every pixel) and run k-means in RGB space to find the K most dominant clusters. The result is a palette sorted by frequency, so the first color is the one that occupies the most pixels.
Pourquoi k-means et pas d'autres algorithmes ?
Popular alternatives like median-cut (used by ColorThief) and Vibrant.js have known issues: they sometimes return colors that are vivid rather than dominant, and their output can vary between runs. Our k-means implementation uses k-means++ seeding with a deterministic golden-ratio fraction, which makes runs reproducible (same image → same palette) and converges to truly dominant clusters.
Formats d'export
- HEX list — paste into any design tool.
- RGB / HSL — for code that needs numeric channels.
- CSS variables — drop into
:root { }and reference withvar(--color-1). - Tailwind config — generates a block ready to paste into
tailwind.config.jsundertheme.extend.colors. - JSON — with HEX, RGB and the percentage each color occupies. Ideal for design tokens or programmatic use.
Trois façons d'importer une image
- Click and pick. The drop zone opens a file picker.
- Drag and drop. Drop any image file directly on the page.
- Paste from clipboard. Press Ctrl/Cmd + V after copying an image — works for screenshots, design tools, websites with Copy Image, anything.
Confidentialité
Your image never leaves your device. Every step — decoding, sampling, clustering — happens in your browser tab. We don't have a server-side component for this tool.
Cas d'utilisation courants
- Recreate a competitor's brand palette from their website screenshot.
- Pull a Tailwind config out of a moodboard.
- Match a website color scheme to a hero photo.
- Generate design tokens from a piece of artwork or photography.
- Choose accent colors for a slide deck from the cover image.
Questions Fréquentes
- L'extracteur de couleurs télécharge-t-il mes images sur un serveur ?
- Non. Votre image ne quitte jamais votre appareil. Chaque étape — décodage, échantillonnage de pixels, clustering k-means — se déroule entièrement dans l'onglet de votre navigateur. Il n'y a aucun composant côté serveur pour cet outil.
- Quels formats d'export sont disponibles pour les palettes extraites ?
- Vous pouvez exporter les palettes en liste HEX, liste RGB, liste HSL, variables CSS (prêtes pour :root {}), config Tailwind (à coller dans tailwind.config.js), ou JSON avec HEX, RGB et pourcentages de fréquence des couleurs. Tous les formats sont en copie un clic.
- Comment fonctionne l'algorithme d'extraction de couleurs ?
- L'outil utilise le clustering k-means — le même algorithme utilisé par Adobe Color et les outils professionnels. Il échantillonne jusqu'à 20 000 pixels de votre image et les regroupe en clusters, trouvant les couleurs dominantes. Les résultats sont triés par fréquence pour que la couleur la plus proéminente apparaisse en premier.
- Quels sont les cas d'utilisation courants d'un extracteur de palette de couleurs ?
- Les designers l'utilisent pour recréer des palettes de marque à partir de captures d'écran, extraire des configs Tailwind depuis des moodboards, assortir les couleurs d'un site web aux photos de bannière, générer des design tokens depuis des œuvres d'art, et choisir des couleurs d'accent pour des présentations.
- L'extracteur de couleurs est-il gratuit ? Combien de couleurs puis-je extraire ?
- L'outil est entièrement gratuit sans inscription et sans limites. Vous pouvez extraire des palettes de 4, 6, 8, 10 ou 12 couleurs de n'importe quelle image. Tout le traitement s'effectuant dans votre navigateur, il n'y a aucun quota d'utilisation ni limite quotidienne.
Outils Associés
Générateur de Dégradés
Créez de beaux dégradés CSS avec un éditeur visuel et copiez le code.
Embellisseur de Captures
Ajoutez des arrière-plans dégradés, des ombres et des coins arrondis à vos captures d'écran.
Optimiseur d'Images
Compressez des images JPG, PNG ou WebP jusqu'à 90% plus petites sans perte de qualité.