Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
Drop an image to extract its palette.
How to use
- Drop an image or click to choose one.
- Adjust the number of colors (2–16).
- Click any swatch to copy its HEX, or Copy all to grab the whole palette.
About this tool
ShowHide
Drop in a photo, a screenshot or a logo and pull out the colours it is actually made of, each shown as a swatch with its hex and rgb values ready to copy. Pixels are grouped into buckets and the buckets are ranked by how many pixels fall into them, so what you get back are the colours that cover the most area — the dominant palette rather than the most striking one. That distinction is worth holding on to: a landscape returns several near-identical blues because the sky really is most of the picture, and the accent colour you had your eye on may sit further down the list, so raise the colour count to reach it. The image is decoded and sampled in the page and never leaves your device.
Frequently asked questions
How does the extraction work?
The image is sampled to a smaller version (max 400px on the longest side), then RGB is quantized to an 8×8×8 grid. The largest buckets become the palette, each averaged back to a representative color so the swatch isn't pixelated.
Why are similar colors merged?
The 8×8×8 quantization is coarse on purpose — without it you'd get a near-duplicate gradient instead of a palette. Increase the count to surface finer distinctions; decrease for a tighter brand palette.
Is my image uploaded?
No. Canvas reads the pixels locally, the buckets stay in memory, and only the final HEX strings are kept.
Why don't the percentages add to 100?
Only the top N buckets are shown — the long tail of less-frequent colors isn't included. The bar's slices are proportional to the visible buckets, not the whole image.
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
Color & CSS
Color Token Exporter
Define a color palette once, export to CSS custom properties, Tailwind config, SCSS, LESS, design-token JSON, SwiftUI Color, or Android colors.xml.
Color & CSS
Color Palette Generator
Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.
Color & CSS
Tailwind Color Palette
The full Tailwind CSS v4 default palette — 22 hues × 11 shades, 50 through 950 — with click-to-copy as Tailwind class, HEX, or rgb().
Color & CSS
Color Sort
Paste a list of hex colors and sort them by hue, saturation, lightness, or perceived brightness — useful for tidying a design-token palette.
Color & CSS
Image Color Picker
Drop an image and click anywhere to grab the exact HEX / RGB / HSL of that pixel — collect a palette as you go.
Image