See your palette on real designs.
Preview your palettes on real UI templates and apps.
Palette visualizer
Preview your palettes on real UI templates and apps.
How to use this tool (step by step)
Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.
Set your palette
- Change any of the five colors with the color squares at the top.
- Or arrive here from the Palette Generator or Browse Palettes with your palette already loaded.
- Press New palette for a random idea.
Why we do this: The preview needs the colors you want to test.
Pick a template
- Press Website, Mobile app, Dashboard or Brand & poster.
- Look at how the colors work on each one.
- Check that text is easy to read and the buttons stand out.
Why we do this: A palette that looks good in a row of squares can fail on a real design. Previewing shows the truth.
Try other roles
- Press Shuffle roles to give the colors different jobs: background, surface, main, accent and text.
- Compare the results.
- Keep the one you like best.
Why we do this: The same five colors can work very differently depending on which one is used for what.
Take it away
- Press Copy HEX codes.
- Or press Edit in Palette Creator to fine-tune.
- Use the codes in your project.
Why we do this: You can move straight from testing to building.
Questions people ask
Quick answers.
How are the roles chosen?
By default the lightest color becomes the background, the darkest becomes the text, and the other three become the surface, main color and accent. Shuffle roles tries other combinations.
Why does text sometimes change between black and white?
Text on buttons and accents switches automatically to whichever of black or white is easier to read on that color.
Are these real websites?
They are simple sample designs made to show the colors in use. They help you judge a palette but are not a full design.