Contrast checker
Compare any two colours in your palette for text accessibility.
Website preview
See how your palette might work together on a simple webpage.
A clear headline for your website
Your palette should create hierarchy as well as looking good together.
How to use the Colour Palette Generator
Choose a starting colour family and a palette style, then select Generate palette. On desktop you can also press the space bar.
Lock colours you want to keep before generating again. Use the pencil to edit a colour, × to remove one, arrows to reorder it, or + between colours to add their midpoint. Palettes can contain between three and eight colours.
The Contrast checker compares two palette colours. AA and AAA results indicate whether the combination reaches common WCAG contrast thresholds for text.
The Website preview automatically applies your first five colours to a sample page so you can judge hierarchy and contrast in context.
Use Download for HEX, RGB, CMYK, HSL values or a PNG/PDF palette card you can keep or share.
VideoandWeb.com