How does this extract colors from an image?

It reads pixel data with the Canvas API, builds a color histogram, runs a weighted median-cut quantization, then de-duplicates near-identical colors in the perceptual OKLab space and splits results into a vibrant pool and a neutral pool so accent colors are never lost in a sea of dark tones.

Why use OKLCH for the shade scale?

OKLCH is perceptually uniform. Adjusting lightness in OKLCH keeps hue and chroma visually stable across all 11 steps, so the 50-to-950 ramp looks hand-tuned instead of muddy like HSL ramps often do.

Is my image uploaded anywhere?

No. Extraction and shade generation run entirely in your browser via FileReader and Canvas. Nothing leaves your device, so it is safe for proprietary or client work.

Tailwind CSS Color Palette Generator From Image

🎨 Tailwind CSS Tool

Tailwind Color Palette Generator

Upload an image, extract its real colors, and export a full Tailwind config with OKLCH shade scales. Click any hex to copy.

🖼️

Click or drop an image

JPG, PNG, WEBP — processed locally, never uploaded

Extracted colors — click a hex to copy, click a row to build its scale

Colors

Sort by

Upload an image to extract colors

tailwind.config.js

How the Color Extraction Works

The tool reads every pixel of your image through the Canvas API and builds a color histogram. A weighted median‑cut pass turns that histogram into candidate colors, then a de‑duplication step in the perceptual OKLab space merges near‑identical tones (so five slightly‑different blacks become one). Finally the survivors are split into a vibrant pool and a neutral pool, which is why an accent like a red logo still appears even when the photo is mostly black and white.

Vibrancy vs Dominance Sorting

Vibrancy puts the most saturated, eye‑catching colors first — ideal when you want a brand accent. Dominance ranks by how much of the image each color covers — useful when you want the palette to mirror the photo's overall mood. Switch between them with the dropdown; the extraction re‑runs instantly from the cached image, no re‑upload needed.

Why OKLCH Shade Scales Look Professional

Each selected color is converted to OKLCH and re‑rendered at 11 lightness targets (50 → 950) while chroma is gently tapered at the extremes to stay inside the sRGB gamut. Because OKLCH is perceptually uniform, the hue does not drift as the shade darkens, the way it does with HSL. The result is a ramp that reads as one coherent color family.

Using the Generated Config

Copy the tailwind.config.js block and merge it under theme.extend.colors. Every extracted color becomes a full scale you can use as bg-brand-500, text-accent-200, border-primary-700, and so on. Each shade tile also shows a WCAG contrast hint in its tooltip so you can pick accessible text/background pairs at a glance.