How to use Color Palette Extractor
- 1Drop an image or paste a screenshot with Ctrl+V. The palette appears right away.
- 2Use the slider to choose between 2 and 16 colors.
- 3Click anywhere on the image to add the exact pixel color to your picked colors.
- 4Click a swatch to copy its HEX code, or click the RGB or HSL line to copy that value.
- 5Copy the whole palette as CSS, SCSS, Tailwind, JSON or a HEX list, or download it as a PNG.
How the colors are found
The tool samples the image, splits its colors into groups with a median cut method, and then refines each group with a few rounds of k-means clustering. The result is a palette of colors that really appear in the image, sorted by how much area they cover. The proportion bar shows these shares at a glance. Fully transparent pixels are ignored.
Uses for designers and developers
- Build a website or brand palette from a photo or mood board.
- Find the exact colors of a logo or screenshot with the eyedropper.
- Paste ready-made
:rootCSS variables, SCSS variables or a Tailwind color block into your project.
Accuracy notes
Dominant colors are averages of similar pixels, so a gradient or a photo with soft lighting gives blended tones rather than one exact pixel value. Use the eyedropper when you need a specific spot. The image is analyzed in your browser and is not uploaded.
Frequently asked questions
How do I get the HEX code of a color in an image?
Upload the image and click the spot you want. The exact color is added to Picked colors, and clicking its swatch copies the HEX code.
How many colors can I extract?
From 2 to 16. Images with only a few distinct colors may return fewer.
What do the percentages mean?
Each percentage is the share of the image's visible pixels closest to that color.
Can I export the palette for Tailwind CSS?
Yes. Choose Tailwind in the export box and click Copy code.
Is my image uploaded?
No. The colors are calculated on your device.