Drop an image. Get a designer-friendly palette of dominant colors using median-cut quantization — diverse colors, not muddy near-duplicates. Hex, RGB, and HSL outputs ready to paste into Figma, CSS, or your design tokens. The image stays on your machine.
Drop an image here, or click to browse
PNG, JPG, WebP, GIF, AVIF — anything your browser can decode
Frequently asked questions
Is my image uploaded to a server?
No. The image is read by your browser via the FileReader API, drawn onto an HTML canvas, and quantized into a palette — all locally. Nothing is uploaded. You can disconnect from the internet and the tool still works. Safe for unreleased mockups, client work, and personal photos.
How is the palette extracted?
The image is downsampled to a 200×200 canvas (for speed; larger gives no quality gain), and the resulting pixels are quantized using the median-cut algorithm. Median cut splits the color space into N regions of roughly-equal pixel population, so the palette colors are diverse by construction — no muddy near-duplicates.
Why median cut and not just 'most common colors'?
Most-common-color extraction gives muddy results: a sky photo returns five slightly-different blues. Median cut explicitly splits the color space, so a photo of mountains might give you sky blue, snow white, rock grey, evergreen green, and dirt brown — actually useful colors. It's the same algorithm used by classic GIF quantization and color-thief libraries.
What formats can I export the palette in?
Three on-page formats and three export shapes. On-page: HEX (e.g. #ff5733), RGB (rgb(255, 87, 51)), HSL (hsl(11, 100%, 60%)). Exports: JSON array (paste into code), CSS custom-property variables (paste into a stylesheet's :root), and plain newline-separated list. Click any swatch to copy that single value.
How many colors should I extract?
For UI design tokens, 6–8 is the sweet spot — enough variety without becoming overwhelming. For pattern matching or palette art reference, 10–12 surfaces more nuanced colors. The tool defaults to 6 and lets you toggle between 4, 6, 8, 10, and 12.
What image formats are supported?
Anything your browser can decode: PNG, JPG, WebP, GIF, AVIF, SVG, BMP. The image format doesn't matter — the algorithm operates on the rendered pixel data after the canvas decodes it. Transparent pixels are automatically skipped, so cutout PNGs work as expected.
Why are the colors sorted lightest-to-darkest?
Easier to scan at a glance — your eye reads light → dark like a brightness gradient. The sort uses WCAG relative luminance, which weights green more than blue (matching human perception). If you need a different ordering, the JSON export gives you raw hex codes you can re-sort however you like.
Can I get the exact original colors, not averages?
No — by design. Each swatch is the average of all pixels assigned to that median-cut box. That averaging is what makes the palette feel cohesive instead of pixel-perfect. If you need a specific pixel's color, use a screenshot tool with a color picker (macOS Digital Color Meter, etc.).