Homepage

Color Palette Extractor

Dominant colors from any image - CSS, Tailwind, and hex - all local in your browser.

Tool guide

Extract dominant colors from any image

Build design tokens from a photo, screenshot, or brand asset without leaving the browser.

  • Dominant swatchesPick 5-50 colors sampled from your image.
  • CSS variablesCopy a :root block ready for your stylesheet.
  • Tailwind snippetPaste a theme.extend.colors.palette block.

Images are analyzed locally; nothing is uploaded.

How it works

  1. Upload image Drop a photo, logo, or UI screenshot.
  2. Choose count Select how many dominant swatches to extract.
  3. Copy tokens Grab CSS variables, Tailwind snippet, or individual hex values.

FAQ

Is my image uploaded?

No. Colors are sampled with Canvas in your browser only.

How many colors can I extract?

Choose 5 to 50 dominant swatches from the dropdown.

What can I copy?

CSS :root variables, a Tailwind theme.extend snippet, or a plain hex list. Click any swatch to copy one hex.

Does it work on logos and UI screenshots?

Yes. Flat graphics and photos both work; very noisy images may return similar nearby tones.

Is this a full color theme generator?

It gives dominant palette tokens. Pair with your own typography and spacing tokens in your design system.

Account

Sign-in is not available on this site. All core tools work without an account.

WARNING! Unsaved work

If you navigate away without saving, you will lose progress since your last save.