Colour palette generator
Press Space or Generate for a new palette. Lock the colours you want to keep, click a code to copy it, or click the swatch’s circle to pick your own colour.
Each palette is built around one random hue, using a classic scheme (analogous, complementary, triadic, split complementary or a single hue) and spread from dark to light, so there is always a colour for text and one for backgrounds. The link in your address bar holds the palette, so you can bookmark or share it. To build a palette around a colour you already have, use the colour wheel, or borrow from the colours of 3,000+ brand logos.
How to make a colour palette
Press Space until a palette catches your eye. Lock the colours you like, then keep pressing Space: only the unlocked colours change. To use a colour you already have, click the circle under a swatch and pick it, and it locks itself. When you are happy, copy the HEX codes or the CSS variables, or copy the link to come back to the palette later.
What makes a good palette?
A palette that works on a real website or logo needs range, not just five pretty colours. Every palette here runs from dark to light, so you always get a colour for text, one for backgrounds and a few for buttons, links and illustrations. As a starting point, give about 60% of a design to the background colour, 30% to a supporting colour and 10% to an accent, the old 60-30-10 rule from interior design.
Frequently asked questions
How many colours should a brand have?
Two to five. One main colour people remember you by, one or two to support it, and a neutral for text. More than that is hard to use consistently.
Can I use these colours commercially?
Yes. Colours can’t be owned in general, and the palettes you make here are yours to use anywhere, free.
How do I check the colours work together?
Open the palette in the visualiser to see it on a sample web page, and test text colours in the contrast checker. Need ideas first? Browse our ready-made palettes.