Palette from Image

Drop a screenshot, photo, or logo into the upload area and the tool extracts the dominant colors using median-cut quantization. The image is decoded into a canvas, downscaled to a small working size for speed, and then split into color buckets — one per swatch you asked for. The palette appears the moment the file is read.

Median cut is the same algorithm that PNG and GIF encoders use to pick a limited color table. It treats the pixels as points in a 3D RGB cube, repeatedly slices the cube along its widest axis at the median pixel, and averages each final bucket. The result is a palette that proportionally represents the image without any single color dominating, which is exactly what you want for design tokens or a brand kit.

Use the slider to pick how many colors to extract. Three or four colors capture the strongest brand presence; six to eight surfaces accents, shadows, and subtle highlights; ten gives you a full reference palette including near-duplicates. Swatches are sorted from light to dark so the ordering stays stable as you scrub the count.

For the cleanest extraction, crop the source first. Running the tool on a full landscape photo will pull in sky, foliage, and skin tones; running it on a tightly cropped logo gives you only the brand colors. Pixels with less than ~80% opacity are skipped automatically so transparent PNGs work cleanly. Click any swatch to copy that single hex, or use the export tabs below to grab the whole palette as CSS variables, a Tailwind colors object, SCSS variables, or raw JSON.