Image Color Extractor
Get the dominant color palette of any image and pick exact pixel colors as HEX, RGB or HSL — 100% in your browser.
Click or tap the image to pick a pixel color.
How to Extract Colors from an Image in 3 Steps
Upload or Paste an Image
Drop a photo, logo or screenshot onto the card, click to browse, or paste from your clipboard. The palette is extracted instantly on your device.
Pick the Palette Size
Choose 4, 6, 8 or 12 colors. Each swatch shows its HEX value and how much of the image it covers. Click the preview to eyedrop any single pixel.
Copy or Download
Click a swatch to copy one color, Copy for the whole list, or Download as CSS variables, JSON or a PNG swatch strip. Esc resets.
Color Formats & Export Files
| Format | Example | Best for |
|---|---|---|
HEX | #f4511e | CSS, design tools, brand guidelines |
RGB | rgb(244, 81, 30) | Canvas, image editors, transparency via rgba() |
HSL | hsl(15, 91%, 54%) | Tweaking lightness or saturation of a base color |
.css | --color-1: #f4511e; | Drop-in design tokens for a stylesheet |
.json | [{"hex":"#f4511e","coverage":0.31}] | Scripts, theming pipelines, Figma plugins |
.png | Swatch strip with HEX labels | Mood boards, slides, sharing a palette |
Image Color Extractor — Frequently Asked Questions
Is my image uploaded anywhere?
No. The image is drawn onto a canvas inside your browser and the colors are computed there with JavaScript. Nothing is sent to a server and nothing is stored.
Which image formats are supported?
Any format your browser can display: PNG, JPG, WebP, GIF (first frame), BMP, AVIF and SVG. There is no file-size limit, but very large images are downscaled internally before analysis.
How do I get the exact color of one spot in the image?
Click (or tap) anywhere on the preview. The eyedropper reads that pixel and shows its HEX, RGB and HSL values; click the swatch to copy it in your preferred format.
Why does the palette not include white or black from my image?
By default near-white and near-black pixels are ignored so backgrounds and shadows do not crowd out the real colors. Turn off "Ignore near-white and near-black" in Options to include them.
How are the dominant colors chosen?
The image is downscaled and its pixels are grouped with median-cut quantization into the number of colors you select. Each swatch is the average of its group and the percentage shows how much of the image it covers.