Image to Tailwind Palette
Turn any image into a full Tailwind v4 color theme, with a complete 50 to 950 shade scale generated for each dominant color.
Dominant colors and shade scales
Tailwind v4 @theme snippet
How it works
- 1
Upload an image
Click Upload Image and choose a PNG, JPG, or WebP file from your device.
- 2
Review the extracted colors
The tool identifies up to 6 dominant colors and generates a full shade scale for each.
- 3
Rename each color
Edit the name field next to any color to give it a meaningful token name, like brand or accent.
- 4
Copy an individual shade
Click any swatch in a shade scale to copy just that hex value.
- 5
Copy the full theme snippet
Click Copy on the @theme block to copy the complete, ready-to-paste Tailwind v4 snippet.
About the Image to Tailwind Palette
Upload any image, a logo, a screenshot, a photo, and this tool identifies its dominant colors by sampling pixel data directly in your browser, then generates a full Tailwind style shade scale for each one, from 50 through 950. The result is output as a ready to paste Tailwind v4 @theme block, matching the same syntax Tailwind v4 itself uses for custom color tokens.
How dominant colors are identified
The image is drawn onto an off screen canvas, then sampled pixel by pixel. Each pixel's color is quantized, rounded to the nearest value in a reduced color space, so visually similar shades are grouped together instead of being counted as dozens of near-identical colors. The most frequent groups become your palette, with near-white and near-black buckets deprioritized, since large plain backgrounds are common but rarely the color you actually want as a theme token.
How the full shade scale is generated
Rather than giving you one flat color per swatch, each dominant color is expanded into an 11 step scale, 50 through 950, by converting it to HSL and adjusting lightness at each step while keeping the underlying hue consistent, with a small saturation taper at the lightest and darkest ends. This mirrors how Tailwind's own default palettes are structured, so the generated tokens slot naturally into places that expect a full scale, hover states, borders, backgrounds, and text, rather than a single fixed color.
Naming and using the output
Each extracted color starts with a generic name, editable directly in the tool, so you can rename it to something meaningful, like brand or accent, before copying. The generated snippet uses Tailwind v4's @theme syntax with --color-name-step custom properties, the same pattern used to define custom color scales in a real Tailwind v4 project, ready to paste into your global stylesheet.
A note on accuracy
Generated shade scales are a close, usable approximation, not a perceptual color science model. For a base color with unusual saturation, a couple of steps in the scale may read slightly differently than a hand tuned Tailwind palette would. Treat the output as a strong starting point, and adjust individual steps afterward if a specific shade needs fine tuning for accessibility contrast or brand precision.
Runs entirely in your browser
Extraction and scale generation both happen client side using the canvas API, your image is never uploaded to a server. If your source is already an SVG rather than a raster image, our SVG Palette Extractor reads exact color values directly from the markup instead of sampling pixels, part of the same SVG & Design Tools and Developer Utilities collections this tool belongs to.
Frequently asked questions
What image formats are supported?
PNG, JPG, and WebP are all supported, since the tool works directly with pixel data in the browser.
How many colors does this tool extract?
Up to 6 dominant colors, each expanded into a full 50 to 950 shade scale.
How accurate is the generated shade scale?
It is a close, practical approximation based on adjusting lightness in HSL space, not a full perceptual color model. It works well as a starting point, though individual steps may need manual fine tuning for precise brand or accessibility requirements.
Can I rename the extracted colors?
Yes, each color has an editable name field. The name you set is used directly in the generated Tailwind theme snippet.
What format is the output in?
A Tailwind v4 @theme block using --color-name-step custom properties, ready to paste directly into a Tailwind v4 project's stylesheet.
Does this work with older Tailwind versions?
The output is written for Tailwind v4's CSS based @theme syntax. For Tailwind v3 or earlier, the same hex values can be added to the colors section of your tailwind.config.js instead.
Is my image uploaded to a server?
No, extraction happens entirely in your browser using the canvas API. Your image is never uploaded or stored.
Why are background colors sometimes excluded?
Near-white and near-black colors are deprioritized during extraction, since large plain backgrounds often dominate an image by pixel count without being the color you actually want as a theme token.