How to use the color palette extractor

Uploaded images stay in memory for this session only and are never written to localStorage or sent to a server. Swatch count, sort order, and the neutrals toggle persist in localStorage.

Workflow

1. Drop an image onto the stage or click to choose a file (JPEG, PNG, WebP, GIF). Step 1 completes the workflow described on the homepage; repeat or adjust inputs before the next action.
2. Wait a moment while the tool downsamples the image and clusters dominant colors. Step 2 completes the workflow described on the homepage; repeat or adjust inputs before the next action.
3. Adjust the color count (3–10), sort order, and optional near-white / near-black exclusion in Options. Step 3 completes the workflow described on the homepage; repeat or adjust inputs before the next action.
4. Copy a single hex, or copy the whole palette as CSS variables or a JSON array. Step 4 completes the workflow described on the homepage; repeat or adjust inputs before the next action.
5. Reload clears the image — only your options preferences are remembered on this device. Step 5 completes the workflow described on the homepage; repeat or adjust inputs before the next action.

Worked examples

• Mood board: Upload a room photo and copy a few dominant swatches for a presentation. Use the primary control (Copy hex) after setting options appropriate to this scenario.
• Prototype theme: Copy CSS variables from a mockup to start a lightweight interface palette. Use the primary control (Copy hex) after setting options appropriate to this scenario.

Before you roll

Palette Extract helps a designer, decorator, or marketer get a useful first set of colors from a photo or mockup. Choose an image, let the browser sample and cluster its pixels, then adjust the number and ordering of swatches. You can copy individual hex values, CSS variables, or

Confirm everyone agrees what Copy hex means for your group before you rely on a single outcome.

Open Options or the sidebar when labels are hidden on small screens.

If something looks wrong

If results look wrong: Downsampling and screen color profiles make extracted values approximate rather than print-calibrated.

Mobile and keyboard notes

Copy hex is reachable from touch and keyboard.

Legal and how-to pages do not load third-party ad scripts.