Image → system → code
Turn any image into a production-ready color system.
Extract colors, refine palettes, check accessibility, generate gradients, and export design tokens or developer-ready code—all in your browser.
Uploaded images stay on this device
Drop an image to create a palette
PNG, JPG, or WebP up to 25 MB. Processing happens locally in your browser.
No image handy?
Try a sample image
Explore six distinct palette styles.
Or start with a color
Start with visual inspiration
Extract
No image selected
Add an image whenever you need new source colors
Your current palette stays available while you explore.
Add an image to extract colors or continue refining this palette.
Shape a usable system
Refine
Raw palette colors
Palette
Select a swatch to edit or name it. Drag, or use Move, to reorder.
Palette colors will appear after an image is analyzed.
Semantic color system
Color roles
Map raw palette colors to stable roles. Suggestions are editable and exports update immediately.
Generated variation
Gradient
Needs 2 colors
WCAG 2.2 contrast
Accessibility
Use selected colors to test text contrast.
Use it in production
Export
Names and semantic roles flow into every developer format.
Ready for design and development
Download visual assets, code, or standards-friendly design tokens from the current state.
Recovery
Palette history
Recent generated and edited states are stored only in this browser.
No earlier palette states yet.
Local library
Saved palettes
Saved on this device—no account or upload required.
No saved palettes yet.