Skip to main content
Ink·tab

Photo → N-color palette

Pull 3–12 dominant colors from a photo, illustration, or mood board.

Upload image· PNG · JPG · WebP · GIF · SVG · up to 30MB
Drop a file here, or
Colors

Everything happens in your browser. Nothing is uploaded.

When to use it

Pulling brand-color candidates from a photo a vendor sent over, reverse-engineering a mood board's dominant colors into a design system, checking an illustration's color distribution objectively, or picking text color for an image background (you need the background's dominant color to plan contrast).

How it differs from color-palette

| Tool | Input | Output | |---|---|---| | color-palette | One color (your brand) | 11-stop ramp (Tailwind 50–950) | | image-palette | One image | Dominant N colors (3–12) |

Opposite directions. One expands one color; the other compresses an image.

Algorithm

  • k-means clustering, directly in sRGB. Deterministic init (mulberry32 seed 42), up to 20 iterations.
  • 256×256 downsample with nearest-neighbor — 100K+ pixels finish in under a second.
  • Web Worker keeps the main thread free, so the UI stays smooth on large images.
  • Pixels with alpha < 128 are skipped — PNG transparency and SVG empty space do not pollute the palette.

Three export formats

  • Hex list — one per line. For quick notes.
  • CSS variables — --brand-1: #...; /* weight 35.2% */. Includes the weight annotation.
  • Tailwind v4 @theme — --color-brand-1: oklch(...); block. Pasteable directly into a Tailwind config.

Not the right tool when

  • Strict design-system specs — k-means surfaces dominant color, but it is not a finished brand spec. Treat it as a starting point.
  • Exact logo-color extraction — logos are usually SVG; parsing the raw fill attribute is more accurate. This tool works on raster pixels.
  • Color change over time (video frames) — this tool handles static images only. Extract individual frames first.

Privacy

Photos, design comps, and mood boards are not transmitted. Canvas getImageData feeds a Web-Worker k-means; zero external API calls.

Images stay on the page

Photos, design comps, and mood boards are not transmitted. Canvas getImageData feeds a Web-Worker k-means — zero external API calls. The extracted color tokens also stay on the page.

Frequently asked questions

How is this different from color-palette?
color-palette starts from *one* color (your brand) and produces an 11-stop ramp (Tailwind 50–950). image-palette starts from *an image* and pulls N dominant colors — for mood boards, brand inspiration, illustration analysis. Inverse directions.
Which algorithm?
k-means in sRGB space. Deterministic init (mulberry32 seed) with up to 20 iterations. Big images are downsampled to 256×256 with nearest-neighbor — 100K+ pixels finish in under a second. V1 uses sRGB distance; V2 may move to OKLab perceptual distance.
Which k value should I use?
Photos and illustrations usually want 5–6. Simple graphics (logos) want 3–5. Mood boards or busy photos want 8–12. The k segmented control re-runs immediately, so iterate.
Is the output deterministic?
Yes. Init uses a fixed seed (42), so the same image + same k always produces the same swatches. Random-seed mode is on the V2 backlog.
What about transparent pixels?
Pixels with alpha < 128 are dropped before clustering, so PNG transparent regions and SVG empty space do not pollute the palette.