Color Palette Generator
Generate schemes, preview on real UI, tune on a wheel, check contrast, build gradients and export anywhere.
Ship beautiful products faster
A single toolkit that brings design, code and color together in perfect harmony.
Roles are auto-assigned from your palette (lightest - background, most saturated - primary) with contrast-safe text. Use Shuffle roles to explore other mappings.
Frequently asked questions
How do I lock a color while generating?
Hover a swatch and click the lock icon. Locked colors stay fixed when you press Generate or the spacebar, so you can lock the ones you like and reroll the rest.
What is the live preview for?
The live preview applies your palette to a real landing page, dashboard or mobile app mockup, auto-assigning roles like background, primary and accent so you can judge the palette in context before you build.
How does the contrast matrix and auto-fix work?
The matrix shows the WCAG contrast ratio of every color pairing (AA needs 4.5:1, AAA needs 7:1). Auto-fix nudges the lightest and darkest colors until they pass AA, giving you a usable text/background pair.
Can I create a palette from an image?
Yes. Click "From image" and upload any photo - the tool samples it on a canvas and extracts its dominant colors.
What can I export the palette to?
CSS variables, CSS OKLCH, SCSS, Tailwind (v3 and v4 @theme), a JSON array, W3C design tokens, Android XML, SwiftUI, a plain hex list, and a PNG poster image. Undo and redo are available with Ctrl/Cmd+Z.