Color palette from image

Extract a dominant color and a palette from any image, entirely in your browser — with exact hex, RGB, and HSL values you can copy as a hex list, CSS variables, or JSON. Your image never leaves your device: no upload, no account, no tracking, and no third-party requests at all.

Drop an image here, paste, or

JPEG, PNG, WebP, AVIF, GIF, BMP. Read in your browser, nothing uploaded.

What this tool does

Drop in a photo, screenshot, logo, or artwork and this tool reads its pixels on your own device to find a dominant color plus a palette of colors that best represent the image. Each color is shown with its exact hex, RGB, and HSL values. You can copy the whole palette as a plain hex list, as a :root block of CSS custom properties, or as JSON, copy any single color by clicking its swatch, or download the swatches with their hex labels as a PNG. A control lets you choose how many colors to pull — from four up to twelve — and the palette re-computes instantly, without re-reading the image.

The cleanest privacy story on the site

Most "color from image" tools either upload your picture to a server or pull in a third-party palette library that phones home. This page does neither. The palette math — a classic median-cut quantization — is written by hand and runs entirely in your browser, so this page makes no third-party requests and loads no extra libraries. The only things it fetches are its own HTML, CSS, and JavaScript from this address; there is no analytics script, no font from a CDN, and no image upload. You can open your browser's network panel and watch: once the page has loaded, nothing about your image leaves the machine.

Colors you can actually use

Design work needs exact values, not a picture of a palette. Every swatch shows its hex code for CSS and design tools, its RGB triplet, and its HSL values, and the hex is drawn as text with an automatically contrasted label so it stays readable on both light and dark colors. Because the values are shown as text on every swatch, you never have to identify a color by eye — you copy it by its code. The dominant color is called out separately and larger, since it is usually the one you want first for a background or a brand accent.

Formats

Any raster image your browser can open works: JPEG, PNG, WebP, AVIF, GIF, and BMP. For an animated GIF the first frame is read. Transparent pixels are ignored so a logo on a transparent background gives you its real colors rather than a muddied edge. The full source is public on GitHub under the AGPL-3.0 licence, and the privacy panel in the footer names every file this page can load.

Questions

Can I extract colors from an image without uploading it?

Yes. The image is read and analysed in your browser, on your device — nothing is sent anywhere. You can confirm it by opening your browser's DevTools Network tab while you use the tool: after the page itself loads, there are no further requests at all. There is no account and nothing to sign up for.

How do I get the hex codes from a photo?

Drop the photo in and the palette appears with each color's hex code shown as text. Click any swatch to copy that one hex code, or use "Copy hex list" to copy them all at once as a comma-separated list. The dominant color's hex is shown larger at the top.

How many colors can I pull from an image?

Choose 4, 6, 8, 10, or 12 from the "Colors in palette" control; the default is 6. Changing it re-computes the palette instantly from the pixels already read. If an image has fewer distinct colors than you ask for — a two-tone logo, say — you get only the colors that are actually there, never invented filler.

Can I copy the palette as CSS variables?

Yes. "Copy CSS variables" puts a :root block on your clipboard with one custom property per color (--color-1, --color-2, and so on), ready to paste into a stylesheet. There is also "Copy JSON" for a structured list with hex, RGB, and HSL for each color.

Does it work on any image?

It works on any raster image the browser can decode — JPEG, PNG, WebP, AVIF, GIF, and BMP. Very large images are sampled from a downscaled copy so the analysis stays fast, which does not change the palette. SVG and other vector formats are not supported, since they have no fixed pixels to sample.

Related tools

Photo Editor — crop, redact, and batch-edit images. Crop Image — trim to an exact box or aspect ratio. Compress images — shrink the file size without changing dimensions. Resize Image — change pixel dimensions to an exact size or percentage.