Design Tool
Color Palette Generator
Generate accessible colour palettes, shades, tints and export-ready design tokens for websites, products and brand concepts.
Palette workspace
Start with a base colour, choose a palette harmony and export the colours in the format your project needs.
Base colour
Palette options
Choose a base colour and harmony type to generate a palette.
Your palette is generated in your browser and is not uploaded.
Generated palette
Shades and tints
WCAG and theme previews
Palette preview
Test headline, body copy and action colour before using the palette in a UI.
Palette preview
Test headline, body copy and action colour before using the palette in a UI.
Export palette
:root {
--palette-1: #e21d48;
--palette-2: #1de2b7;
--palette-3: #1daae2;
--palette-4: #e2551d;
--palette-5: #1de255;
}How to Use Color Palette Generator
- Pick a base colour.
- Review the generated palette, shade, tint and gradient variations.
- Copy individual colour values from the palette.
- Use the colours in UI mockups, brand ideas or design systems.
FAQ
Can I start from any colour?
Yes. Choose any base colour and the tool will generate palette variations around it.
Can I copy palette colours?
Yes. Each generated colour value can be copied for use in CSS, design tools or documentation.
Are these palettes accessibility checked?
No. Use the Contrast Checker to test foreground and background combinations before shipping UI colours.
Can I use the colours commercially?
Yes. Generated colour palettes are free to use in personal and commercial projects.