Color Palette from Image
Color
Drop a photo, screenshot, or design and the tool samples pixels, buckets them in a coarse RGB grid, and returns the most-represented buckets averaged back to a representative color. Adjust how many colors you want (2–16). The palette is shown as a proportional swatch bar (each slice is sized by share) and as individual swatches with HEX, RGB, and the % of the image they cover.
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.
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).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.