How to use the 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.
Also searched as: 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.
Tools that pair well with the Image Color Palette Extractor
- 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.
- OKLCH Color Converter — Explore the perceptually uniform OKLCH color space with live sliders, see whether a color fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.
Frequently asked questions
How do I get the color palette from an image?
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.
Can I install Image Color Palette Extractor as a web app and use it offline?
Yes. Image Color Palette Extractor is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.