Extract Image Colors to CSS Variables
Upload an image and extract its dominant colors as CSS variables, Tailwind config, or SCSS variables. Quick color palette generation for developers.
Drag & drop an image, or click to upload
JPG, PNG, WebP · Single file
No files are uploaded to any server. All processing happens locally in your browser.
Frequently Asked Questions
How does color extraction work?
The tool samples your image pixels and uses a median cut color quantization algorithm to find the most dominant colors. It groups similar colors together and returns the most representative ones.
What output formats are supported?
Three formats: CSS Custom Properties (--color-1, --color-2, etc.), Tailwind CSS config (extend colors object), and SCSS variables ($color-1, $color-2, etc.). Copy with one click.
Can I adjust the number of colors?
Yes. Use the slider to choose between 3 and 12 colors. Fewer colors give you the most dominant tones, while more colors capture subtle variations and secondary hues in the image.
Selling on Amazon, Shopify or Etsy?
Turn your product photos into studio-grade shots — white-background main images, model try-on, full listing suites. 5 free generations.
You might also need
Get free image tips & tool updates
No spam, unsubscribe anytime.