Picking colours that work together is one of the hardest parts of design for non-designers, and getting it wrong makes a website, slide deck or brand look amateur instantly. The good news is that harmonious palettes follow well-understood rules based on the colour wheel. This free color palette generator applies those rules for you. Start from a base colour, perhaps your logo colour, and choose a harmony. Complementary uses the opposite colour for strong contrast. Analogous uses neighbours for calm, natural schemes. Triadic spaces three colours evenly for vibrant balance, split-complementary is a softer version of complementary, tetradic gives a rich four-colour scheme, and monochromatic creates tints and shades of one hue. You get a five-colour palette with HEX, RGB and HSL codes. Click any swatch to copy its code, lock the colours you love and press Shuffle (or the spacebar) to regenerate the rest. Each swatch shows whether white or black text is more readable on it, with the WCAG contrast ratio, so your palette is usable as well as pretty. Export it as CSS custom properties, a Tailwind config snippet or a JSON array, or download a PNG of the palette. Everything happens in your browser.
Generate a palette
Click a swatch to copy its HEX. 🔒 locks a colour when you shuffle.
How to use the palette generator
- Pick a base colour (e.g. your logo).
- Choose a harmony rule.
- Lock colours you like and shuffle the rest.
- Export CSS or download the image.
The 60-30-10 rule
Use one colour for about 60% of a design (backgrounds), a second for 30% (sections, cards), and an accent for 10% (buttons, links).
FAQ
Which harmony should I choose?
Analogous for calm and natural looks, complementary for bold contrast, triadic for playful, balanced designs.
What does the contrast figure mean?
The WCAG contrast ratio of white or black text on the swatch. 4.5:1 or more passes for normal text.
Can I save palettes?
Copy the code or download the PNG; nothing is stored online.
Is anything uploaded?
No. It all runs in your browser.
Comments
Post a Comment