Drop an image — photo, screenshot, logo, whatever — and get back 5, 8, or 12 dominant colors with their nearest Tailwind shade and a copy-ready CSS block.
How many colors
Drop an image to extract its palette.
Drop an image
Photos, screenshots, album art, logos — anything raster.
Pick how many colors
5, 8, or 12. More clusters catches subtler hues; fewer surfaces the dominant tones.
Read the palette
Each swatch shows hex, weight, and the nearest Tailwind shade for quick design-token mapping.
Copy
Individual hex, Tailwind shade key, or the whole palette as CSS custom properties.
No. The extractor resamples the image onto a 120×120 canvas in your browser and runs k-means on the pixel data. Nothing leaves the page.
K-means seeds its centroids with k-means++, which has randomness baked in. For most images the top 3–4 colors are stable; the deeper clusters can vary. Run it a couple of times and pick the result that feels right — all valid palettes of the image.
For every extracted swatch we compute the squared-RGB distance to every Tailwind palette swatch (22 colors × 11 shades) and surface the closest. Useful when you want your palette to line up with your existing Tailwind tokens.
Yes — we downscale for speed, so throwing in a 4K image won't slow anything down. The downsample preserves color distribution faithfully.
Shade generator
Generate a full 50→950 Tailwind palette from any base color, along the Tailwind lightness curve.
Mesh gradient
Draggable radial-gradient blobs on a Tailwind palette — trendy mesh backgrounds without signup.
Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.
Explore lokal