Design Token and Color Palette Exporter
Extract a palette from any image or add colors by hand, then export Tailwind, CSS, SCSS, or JSON tokens.
Drop an image here, or .
PNG, JPG, WebP, GIF, or SVG. Nothing is uploaded.
What it does
Extract palette from image
Drop any image and get its dominant colors as hex values, sorted by how much of the image they cover.
Add colors by hand
Paste hex codes to build a palette without an image. Duplicates are ignored automatically.
Four export formats
Tailwind config, CSS custom properties, SCSS variables, or JSON tokens. One click to copy or download.
Readable color names
Every swatch gets a name based on its nearest color family, so tokens read like brand-blue-1 rather than color-1.
Contrast check
See each color against white and black with WCAG ratios so you can pick accessible text colors.
Runs entirely in your browser
Your image never leaves your device. No upload, no server, no logging.
How it works
Step 1
Pick a source
Drop an image to sample it, or paste hex codes by hand.
Step 2
Tune the palette
Adjust the max color count, remove swatches you do not want, and check contrast.
Step 3
Export
Pick Tailwind, CSS, SCSS, or JSON, then copy or download the result.
How it compares
| What matters | Typical tools | ToolDeck |
|---|---|---|
| Works offline | No | Yes, after first load |
| Sign-up required | Usually | No |
| File upload | Yes, to a server | Never, runs in your browser |
| Watermark | Common on free plans | Never |
| Daily usage limit | Common | None |
| Cost | Credits or subscription | Free, unlimited |
Related tools
Questions people ask
Is my image uploaded anywhere?
No. The image is loaded into a canvas in your browser and colors are sampled from the pixels locally. Nothing is uploaded, logged, or stored on a server.
How are the colors chosen?
Pixels are quantized into a coarse grid and counted, then the most frequent buckets are kept while skipping colors that are too close to ones already picked. The result is the dominant color set, not every single color.
Why are the swatch names not exact, like "sea-foam"?
Names are picked from a small family list (red, blue, indigo, emerald, and so on) based on nearest color distance. Numbered suffixes like blue-1 and blue-2 keep the names unique inside a palette.
What does the contrast column mean?
Each color is checked against pure white and pure black using the WCAG relative luminance formula. A ratio of 4.5 or higher passes AA for body text. 7.0 or higher passes AAA. Use it to choose accessible text colors on your background.
What formats can I export?
Four: a Tailwind CSS config fragment with theme.extend.colors, CSS custom properties under :root, SCSS variables, and a JSON tokens file with a color object.
Does it support SVG uploads?
It depends on the browser. Chrome and Firefox rasterize SVG into the canvas fine. Some browsers block canvas reads on SVGs that reference external resources. If it fails, export the SVG to PNG first.
Can I edit a swatch after extracting?
You can remove any swatch with the Remove button, and add new ones with the hex input. Editing a color in place is not supported. Remove and re-add is the current workflow.
Does it work offline?
Yes, after the first page load. No network requests are made while extracting colors or exporting tokens.