Website colour palette generator.
Hit Generate (or press space) for a new palette. Lock the colours you like, see them on a real page and make sure every bit of text is readable. Free, no sign-up.
Tap a colour to change it, or type a hex code.
On a real page
An example bakery website, in your colours.
Contrast checks
WCAG AA needs 4.5:1 for normal text. Every pairing your site will use, tested.
Export
:root {
--color-background: #fff6d6;
--color-card: #ffffff;
--color-foreground: #111111;
--color-primary: #d62c0d;
--color-primary-foreground: #ffffff;
--color-accent: #ffd21f;
--color-accent-foreground: #111111;
}How to use the generator
- 01
Generate
Press space or hit Generate until something catches your eye. Lock any colour you want to keep, like your logo colour, and keep generating around it.
- 02
Check it on a page
The preview shows your palette on an example website, and the contrast checks flag any text that would be hard to read, with a Fix button that corrects it.
- 03
Take it away
Copy the CSS, a Tailwind theme or plain hex codes, or copy the link to come back to your palette later or send it to someone.
What makes a good website palette
Give every colour a job.
A palette is far more useful when each colour has a role. Here that's a background, a card colour for panels and boxes, a text colour, one strong colour for buttons and links, and an accent for badges and highlights. When every colour has a job, the design stays consistent as the site grows.
Let the background do most of the work.
Designers often use a rough 60-30-10 split: about 60% background, 30% text and cards, and 10% strong colour. Saving the bright colours for the things you want people to click is what makes them stand out.
Readable beats pretty.
Low-contrast text is one of the most common accessibility problems on the web, and one of the easiest to avoid. The checks test every pairing a site actually uses, and the generator nudges its own colours until they pass WCAG AA. If a colour you've locked fails, Fix adjusts it by as little as possible.
Mix colours the way eyes see them.
The generator works in OKLCH, a colour space built so that equal steps in lightness look equal to people. A yellow and a blue at the same lightness really do look as light as each other, which is why the palettes hang together, and why the tints and shades in the Tailwind export look evenly spaced.
Questions about the palette generator
Is the palette generator free?
Yes. It's free to use, with no sign-up and nothing to install. Your palette is saved in the page link, so you can bookmark it or send it to someone.
What contrast ratio does website text need?
WCAG, the web's accessibility standard, asks for at least 4.5:1 between normal text and its background at level AA, and 3:1 for large text (about 24px, or 19px bold) and for things like button borders and icons. Level AAA asks for 7:1. UK public sector websites have to meet AA by law, and it's a sensible bar for any business: if people can't read your site, they can't buy from it.
How many colours does a website need?
Fewer than you'd think. Most sites work well with a background, a card or panel colour, a text colour, one strong colour for buttons and links, and an accent for highlights. Lighter and darker versions of those cover hover states and borders, which is why the Tailwind export includes a full scale for the main and accent colours.
Can I use the colours in my own project?
Yes. Anything you make with the generator is yours to use however you like, including commercially, with no credit needed.
How do I use the Tailwind export?
It's written for Tailwind CSS v4. Paste the @theme block into your main CSS file under @import "tailwindcss", and classes like bg-primary, text-foreground and bg-accent-200 work straight away. On Tailwind v3, put the JSON export in the colours section of tailwind.config.js instead.
Like your palette?Let's build the site.
Tell us about your project and we'll come back within one working day with ideas and a fixed-price quote.
Get a free quote →