Image Color Picker

Extract colours from an image

Upload a photo to pull out its colour palette, or click anywhere on the image to grab an exact pixel colour. Everything runs in your browser — your image is never uploaded.

Drop an image here, or click to choose

PNG, JPG, WebP or GIF. Your image stays in your browser — nothing is uploaded.

How to extract colours from an image

Drop a photo onto the box above (or click to browse). The tool reads the image with the HTML canvas, samples its pixels, and builds a palette of the most common colours. To grab a specific colour instead, just click anywhere on the image — the exact pixel colour appears with its hex, RGB, HSL and OKLCH codes.

How the palette is built

Behind the scenes, the tool reads every pixel and groups similar colours together using colour quantization — a technique that buckets near-identical shades so the result reflects the image's dominant colours rather than thousands of barely-different pixels. The most frequent buckets become your palette, ordered by how much of the image they cover. That's why a photo of a forest returns greens and browns rather than a muddy average.

What people use this for

Pulling a palette from an image is one of the fastest ways to start a design. Common uses include matching a website's colours to a brand photo or product shot, building a mood board palette from an inspiration image, extracting colours from a logo to recreate a brand, grabbing the exact colour of one element in a screenshot, or generating a cohesive scheme from a favourite photograph. Designers reach for it constantly because a real photo already contains colours that naturally work together.

Your image never leaves your device

All processing happens locally in your browser using the canvas API. The image is never uploaded or sent to a server, which makes this safe for screenshots, unreleased product mockups, client work and private photos. Nothing is stored either — refresh the page and it's gone.

Tips for better results

For the cleanest palette, use a reasonably high-quality image with clear, distinct colours; very dark or washed-out photos yield muted palettes. If you want one specific colour rather than the overall scheme, use click-to-pick on the exact spot — it reads that single pixel precisely. Large images are automatically scaled down for speed without affecting the colours detected.

Next steps

Click any palette swatch or code to copy it, or use Copy all to export the whole palette as CSS, Tailwind or JSON in one click. Want to refine a colour, build a gradient from two of them, or check contrast? Use the picker, gradient generator or contrast checker.

Frequently asked questions

How do I get colors from an image?
Upload or drag an image. It extracts a palette of the most common colours automatically, and you can click anywhere on the image to grab an exact pixel colour with its hex, RGB, HSL and OKLCH codes.
Is my image uploaded to a server?
No. It is processed entirely in your browser with the canvas API and never sent anywhere, so it's safe for private and unreleased images.
What image formats are supported?
Any format your browser can display, including PNG, JPG, WebP and GIF.
How many colors does it extract?
Up to twelve dominant colours, ordered by how much of the image they cover. You can copy any single one or export the whole set at once.
Can I get a palette from a logo or screenshot?
Yes — logos and screenshots work well, and click-to-pick lets you grab the exact colour of any element. Everything stays in your browser.

More color tools

Color Picker →
Refine any extracted colour.
Gradient Generator →
Build a gradient from the palette.
Converter →
Convert between any formats.
Contrast Checker →
WCAG AA/AAA pass-fail.