← Playground一覧に戻る
other

Palette Extractor

Pull a color palette out of any image — drag & drop, paste, or pick a sample, then click to copy. Everything runs in your browser.

Palette Extractor

A small design tool that finds the dominant colors of any image using median cut quantization. Drop in a photo, a screenshot, or a piece of art and get a ready-to-use palette in seconds — no upload, no account, nothing leaves your browser.

How to Use:

  • Load an image — drag & drop it anywhere on the tool, paste from the clipboard with Ctrl+V, or click the drop zone to browse. No image handy? Hit one of the sample chips
  • Copy a color — click any swatch to copy it instantly; each swatch also shows how much of the image it covers
  • Pick a precise color — click anywhere on the image preview to copy the exact pixel color under the cursor
  • Tune the result — adjust the number of colors (3–8) and switch between HEX, RGB, and HSL
  • Export — press Copy as CSS to grab the whole palette as CSS custom properties
ControlEffect
ColorsNumber of palette colors to extract (3–8)
HEX / RGB / HSLFormat used for swatch labels, copying, and CSS export
Copy as CSSCopies the palette as --palette-N custom properties
New imageClears the current image and returns to the drop zone

The extraction works by downscaling the image, then recursively splitting the pixel cloud along its widest color channel (median cut) until the requested number of clusters remains. Each cluster’s average becomes one swatch, ordered by how much of the image it occupies.