Color Palette Generator – Create Colour Schemes & CSS Variables
Build a harmonious set of five colours from one base colour or at random. Lock the ones you like, regenerate the rest and copy HEX codes or ready-made CSS variables.
Pick a base colour and a scheme — complementary, analogous, triadic, tetradic, split complementary, monochromatic or shades — or choose Random. Press Space or click Generate for new ideas, lock the colours you want to keep and click a swatch to copy its HEX code. The CSS variables are ready to paste.
How to use Color Palette Generator
- Choose a base colour, for example your brand colour.
- Pick a colour scheme.
- Press Space or click Generate to see variations.
- Lock the colours you like with the lock icon.
- Click a swatch to copy its HEX code, or copy the CSS variables.
How colour schemes work
Colour harmonies are based on positions on the colour wheel. The generator rotates the hue of your base colour and adjusts lightness and saturation so the five colours work together.
| Scheme | Rule | Feel |
|---|---|---|
| Complementary | opposite hue (180°) | strong contrast, energetic |
| Analogous | neighbours (±30°) | calm, natural |
| Triadic | three hues 120° apart | lively but balanced |
| Tetradic | two complementary pairs | rich, needs one dominant colour |
| Split complementary | base + two hues beside its opposite | contrast with less tension |
| Monochromatic | one hue, different lightness | clean, elegant |
"Shades" gives a light-to-dark ramp of one colour, handy for buttons, borders and hover states. "Random" ignores the base colour and suggests pleasant combinations.
The 60-30-10 rule
A palette is easier to use when colours have different jobs. Use one colour for about 60 % of the design (backgrounds), a second for 30 % (cards, sections) and an accent for 10 % (buttons, links). The remaining colours can serve as hover states, borders or charts.
Contrast and accessibility
Each swatch shows its text in black or white, whichever is more readable. Body text should reach a contrast ratio of at least 4.5:1 against its background under the WCAG guidelines. Check your final text and background pairs with a contrast checker, and convert HEX to RGB values with the HEX to RGB Converter tool.
From palette to code
The CSS box lists your colours as custom properties such as --color-1. Paste them into your stylesheet and use var(--color-1) anywhere. Rename them to roles like --primary or --accent once you have decided what each one does.
Tips
- Start from your logo or a product photo and use its main colour as the base.
- Lock a colour you love, then regenerate until the rest fits.
- Keep pure black and pure white out of the palette; very dark and very light tints look softer.
- Test the palette on a real layout before you commit.
Everything runs locally in your browser. Making an icon in your new colours? Try the Favicon Generator.
You may also find these free tools useful: JSON Formatter, Password Generator and Regex Tester.
Frequently asked questions
How do I generate a colour palette?
Pick a base colour and a scheme, then press Space or click Generate. Lock the colours you like and regenerate the others.
What is a complementary colour scheme?
It uses colours opposite each other on the colour wheel, such as blue and orange, for strong contrast.
How do I copy a colour?
Click a swatch to copy its HEX code, or copy all colours as CSS variables.
Can I keep some colours fixed?
Yes. Click the lock icon on a swatch; locked colours stay when you generate new ones.
Are the palettes accessible?
The tool shows readable text colours, but always check your final text and background pairs for a contrast of at least 4.5:1.
Last updated: