Image to Palette
Create AI-ready design palettes from a single image. Get HEX codes, CSS variables, and a ready-to-paste LLM prompt — all in your browser, nothing uploaded.
Drop an image here, or click to browse
JPG, PNG, WebP, GIF, AVIF supported
Colors to extract:
Frequently Asked Questions
Is my image uploaded to a server?
No. Your image never leaves your device. Color extraction runs entirely in your browser using the Canvas API to read pixel data locally. Nothing is sent anywhere.
What image formats are supported?
Any format your browser can natively display: JPG, PNG, WebP, GIF, AVIF, SVG, and more. HEIC files from iPhones are not natively supported in most browsers — convert them first using our HEIC to JPEG tool.
How does the color extraction work?
The tool uses a median cut algorithm. It samples pixels from the image, then repeatedly divides the color space along its widest color channel until it has the requested number of distinct groups. Each group is averaged to produce one palette color — ensuring you get truly distinct, representative hues rather than near-identical shades.
What is the LLM design prompt export?
It generates a plain-text file you can paste directly into Claude, ChatGPT, Cursor, Bolt, or any AI coding tool. The prompt includes your palette colors with automatically assigned roles (Primary, Accent, Background, etc.), CSS variables, a Tailwind config snippet, and a mood description — giving the AI everything it needs to apply your design system consistently.
How do I use the colors in my project?
Click "Show CSS" to reveal ready-to-paste CSS custom properties. Add them to your :root block and use var(--color-primary) etc. throughout your stylesheet. Each swatch card can also be clicked individually to copy that color's HEX code.