Palette visualizer
A palette that looks great as swatches can fall apart in a real interface. Preview yours on a landing page, a dashboard, mobile screens, a poster and a typography layout. Colors are assigned to background, text, primary, secondary and accent roles automatically — shuffle them until it clicks.
Paste HEX codes to preview your palette on real designs.
How to use the palette visualizer
- Paste your HEX codes, or start from a random palette.
- Switch between the landing page, dashboard, mobile, poster and typography mockups.
- Click “Shuffle roles” to try different assignments of primary, secondary and accent colors.
- Open the palette in the generator to fine-tune it.
How roles are assigned
The lightest color becomes the background and the darkest becomes text, which gives the best chance of readable contrast. The remaining colors are ranked by saturation: the most vivid becomes the primary action color, followed by secondary and accent. A warning appears if text contrast drops below WCAG AA.
Frequently asked questions
How do I test a color palette on a website design?
Paste your HEX codes above and switch to the landing page or dashboard mockup to see the colors in context.
Can I use my own palette?
Yes — paste any 2 to 20 HEX codes, or link here from the generator.