Color

Extract a color palette from an image

To pull a palette from a picture, crop to the subject, ask for a small number of colors, and copy the hex list. Five colors is a UI palette. Eight to twelve is a poster. Sixteen is a study. Thirty-two is almost the photo.

The palette page runs the same engine as the converter and then treats the legend as the result. Under the hood the picture is still divided into cells, the cells are averaged, and a median cut keeps splitting the largest color range until it has the count you set. Big flat areas win. A beige wall with a small red sign will produce several beiges and might miss the sign. Crop the sign, or lower the width so the wall collapses into one cell color and the sign gets a cell of its own. That bias is the reason "extract palette" tools sometimes feel wrong. They're counting pixels, not importance.

Copy the list in the shape you need

Copy legend gives hex values, counts, and names when a named palette is on. Copy CSS gives root variables like --c1, --c2 in hex order. The order is by how many cells use the color, most first. --c1 is the background more often than it's the brand color. Rename them in your stylesheet. Don't ship --c1 in a design system and hope you remember.

If you wanted a game's palette rather than the photo's, switch the menu to Pico-8 or handheld green and set the color count. You're no longer extracting. You're projecting. Both are useful, and they are different jobs. Projection is documented on the Pico-8 page. Extraction is the Source colors option.

A five-color UI example

Upload a product photo on a clean background. Set width to 32 and colors to 5. Turn dithering off so the swatches aren't a compromise with speckle. You might get background, product body, shadow, highlight, and one accent. Drop those into a page as background, text, muted text, card, and button. If the accent lost, it was too small in the frame. Crop tighter and run it again. Five minutes of cropping beats hand-picking hex from a color dropper you mis-click on a compressed JPEG.

The pixel preview is still there so you can see where each swatch landed. If --c3 appears only on a JPEG fringe around the object, it's junk. Cut colors to 4 or paint is unnecessary. Lower the count until every swatch is a region you would defend.

Saved custom palettes live in this browser's localStorage. They're not an account. Clearing site data clears them. Paste hex if you want those extracted colors to become the snap target for a later sprite. The main converter reads the same saved list. That's how a palette you extracted on Monday constrains a sprite on Tuesday.

How many to ask for, beyond the UI example, is the color count guide. The short version for extraction: stop when removing one more color would merge two regions you need to tell apart.

If you're extracting for a stitch or bead project, don't stop at the CSS. Those pages snap to floss numbers or bead references and attach counts. A hex that looked perfect in a stylesheet can be a color you can't buy. Run the same crop through the chart tool at the same color count and read the legend before you publish a brand palette you can't reproduce in thread. The extractor is for screens. The chart pages are for objects. Using the extractor's fifth swatch as a "close enough" skein is how a finished piece drifts from the mock.

When extraction beats pixel export

When the deliverable is a design token list, a slide deck palette, or CSS for a landing page. When you don't need a counted craft chart. When the photo is mostly one product on white and the grid is only a sanity check.

Palette extraction checklist

Cropped subject. Width set. Dither off for clean swatches. Every swatch maps to a region you can name. CSS copied and renamed in your repo. For games, paste hex into the main converter save list if sprites must share the same cap.

If Lospec or a design doc already lists hex values, paste them into the converter instead of extracting from a photo. Extraction answers "what's in this picture." Paste answers "what we already agreed to use." Mixing the two without labeling causes sprites that drift from the style guide.

Questions

Keep going

• Palette extractor
• How many colors
• Fixed palettes
• Pixel converter

Updated 30 September 2026