Skip to content

Upload · local canvas

Image color extractor

Drag a moodboard, screenshot, or product photo — we downsample in the browser and surface a handful of dominant HEX codes you can click to copy. Handy when marketing sends a JPG brand collage and you still need numbers for CSS.

Why this extractor exists

Moodboards arrive as PNGs, not Figma variables. This tool samples dominant swatches after a lightweight resize so you can seed a palette discussion without manually eyedroppering eight times.

How to use it

  1. Upload a JPEG or PNG; wait for the canvas pass to finish on large files.
  2. Read the ranked swatches — if one bright accent disappears, crop tighter around the subject.
  3. Copy HEX from a chip (wired in the page script) into your token draft or the palette generator.
  4. Validate text pairs in the contrast checker — dominant colors do not imply readable UI.

Skip this when…

You already have brand HEX locked — go straight to ramps. This page is for discovery from imagery, not compliance proofs.

Workflow ideas

  • Flatten noisy gradients before upload if you want fewer near-duplicate purples.
  • Export a tighter crop when the hero sky dominates pixels but the product is what matters.

Related tools

Turn swatches into systems and checks.

Color picker Fine-tune a sampled swatch with linked formats. Palette generator Grow harmonies from an extracted anchor color. Contrast checker Verify text and icon colors on top of sampled fills.

FAQ

Does the extractor send my image to a server?

The default path processes in your browser with canvas. Watch the page notes if a future optional server mode appears — it would be explicitly labeled before upload.

Why eight colors?

Enough for a moodboard strip without turning the page into a rainbow spreadsheet. If you need fewer, ignore the tail swatches; if you need more, run multiple crops.

Does EXIF orientation matter?

Most phone photos include rotation metadata. Browsers usually respect it when drawing to canvas — if colors look shifted, try exporting a flattened PNG from an editor.

Can I use this for trademarked imagery?

You are responsible for rights on the files you load. This tool does not know if your screenshot is fair use or confidential — treat it like any other local image editor.