Comment utiliser : Image Color Palette Extractor
- Choose an image, drop it in or paste it — or try the sample.
- Set how many colors you want; tick Ignore near-white and near-black for logos and product shots on plain backgrounds.
- Click any swatch to copy it, or click the image to pick the exact color of a pixel.
- Export the palette as CSS variables, a Tailwind colors config, SCSS or JSON.
How the colors are found
The image is scaled down and its pixels are grouped by color with k-means clustering: the algorithm places as many “centers” as colors you asked for, assigns each pixel to the nearest one, moves each center to the average of its pixels, and repeats until they settle. Each center becomes a swatch, and its share shows how much of the image it covers. Transparent pixels are skipped, so logos on transparent backgrounds work well.
Using the palette
- Pick a dominant color for backgrounds and a strong, contrasting one for buttons and links.
- Check text and background pairs with the Contrast Checker.
- Turn one color into a full 50–950 scale with the Tailwind Color Generator, or find its name with the Color Name Finder.
Your image is processed on your device with a canvas and never uploaded.
Aussi recherché comme : image color palette, color palette from image, extract colors from image, image color picker, get colors from photo, color extractor, logo color picker, palette generator from photo.
Outils complémentaires : Image Color Palette Extractor
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- Color Mixer — Pick two colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
Questions fréquentes
How do I get the color palette from an image?
Drop the image here: its main colors appear as swatches with how much of the image each covers. Change the number of colors with the slider and export the palette as CSS, Tailwind or JSON.
How do I find the HEX code of one color in a picture?
Click that spot on the image. The exact pixel color appears below it in HEX, RGB and HSL, ready to copy.
Why is white or black the top color?
Backgrounds often cover most of an image. Tick “Ignore near-white and near-black” to get the colors of the subject instead.
Is my image uploaded?
No. It is read and analyzed in your browser; nothing is sent to a server.
Puis-je installer Image Color Palette Extractor en tant qu’application web et l’utiliser hors ligne ?
Oui. Image Color Palette Extractor est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.