Set Colors, stare at the swatches, copy them. Six is the start here: background, surface, text, mute, accent, one spare. The grid above the swatches shows where each hex landed; you don't have to download pixel art to use this page.
Median cut on cell averages. Large areas win. A beige wall spits out several beiges and can swallow a small red mark. Crop to the mark and run again. That quirk and a five-color UI walkthrough are in extract a color palette. If it's a tiny logo mark, crop tight or you'll never see it in the legend.
Swatches, not pixels
Web devs naming CSS variables, brand folks auditing a reference photo, game artists who want an honest hex list before hand-drawing tiles. Also anyone learning why "dominant color" isn't always "brand red." You'll copy hex here, not stitch counts.
Need a finished PNG grid for Discord or a game? Open the image to pixel art converter instead. Need DMC floss numbers? The stitch matcher is on cross-stitch. If you're here for hex only, you're in the right place.
Six-color start
Six colors targets a tight UI palette without duplicating every shadow on a product photo. Width 32 gives enough cells for a stable median cut without listing every JPEG artifact. Dither off keeps each swatch tied to solid regions. Contrast at zero preserves the upload unless you want exaggerated separation. It's extraction, not pixel export.
Raise Colors before width when a small accent is missing. Raise width slightly when two important hues keep merging because the grid is too coarse.
Copy when done
Upload or pick Stones. Watch the preview grid for regions that share a swatch. Move Colors one step at a time until every area you care about has a legend entry. Copy legend for a spreadsheet; Copy CSS for a stylesheet.
Swatch clearly wrong? Crop the source and run again instead of hand-editing hex in the legend. Save a custom palette in this browser if you'll reuse the list on the main converter. Clearing site data wipes saved palettes; keep a backup text file.
When swatches should become pixels under the same hex constraints, switch to the main converter, pick your saved palette, choose format PNG, and Download there. You'll reuse the same hex list; that's the point.
When beige wins
"No color cut" on a photograph gives dozens of one-off hex values. That's not a palette; it's a census of noise. Keep a numeric color limit. Dither on averages speckles into fake mid-tones that won't match flat UI panels.
Count order isn't brand priority. A 2% red badge may rank below a 40% gray wall. Crop to the badge or raise colors until it appears. Pico-8 here doesn't extract photo colors; it remaps the grid to sixteen fixed game hex values. Read Pico-8 and handheld greens before you mix the two workflows.
Dull colors? Modest contrast on the pixel converter beats width 128 on this page.
Legend vs CSS
Copy legend is hex with counts. Copy CSS is custom properties ordered by count. Counts mean area, not brand importance. Red button is 2% of the photo? It might vanish at 5 colors and show at 8. Raise the slider one step until every region you care about has a swatch, then stop. Past 16 you're sampling the photograph.
Rename --c1 and friends before production CSS. --c1 is often background gray, not primary brand blue. You'll thank yourself after the first deploy.
Need a grid instead?
Fixed palettes are a different job. Pico-8 on the converter forces colors; it doesn't extract them. General color-count advice: how many colors.
Paste hex if the palette is already written down. Saving goes to localStorage for this site. No account. When swatches should drive pixels, open the image to pixel art converter and select the saved palette. Sprites with transparency: sprite converter. Craft charts need cross-stitch or fuse beads, not raw hex alone.
Example images load locally like every other tool page so you can see median cut on flat UI blocks vs noisy skies before you touch a client asset. Nothing phones home for a cloud swatch service. Counts beside each hex update live when you move width or Colors, so copy after you stop tweaking. It's browser-only, like the rest of Pixelate Tools.
Questions
Why did a small logo color disappear?
Median cut favors colors that cover many cells. Crop tight on the logo, or lower width so the background collapses into fewer cells.
What does Copy CSS return?
Variables --c1, --c2, ordered by how many cells use them. --c1 is often the background. Rename before they hit your design system.
Can I reuse these colors on a sprite?
Yes. Save the hex list as a custom palette. The main converter in this browser can snap to it afterward.
Does width change the hex values?
Yes. Width sets how many cells sample the image. Too wide adds JPEG noise colors; too narrow merges distinct hues.
Is this the same as the Pico-8 menu?
No. Pico-8 forces fixed game colors onto the grid. This page extracts from your upload unless you switch modes elsewhere. They're different jobs; don't mix them up.
Updated 30 September 2026