Color Palette Generator
Start from one colour and build a harmonious palette — complementary, analogous, triadic, split-complementary, tetradic or monochromatic — ready to copy as CSS variables.
Result
Choose a base colour and a colour scheme.
How to use this tool
- Choose a base colour and a scheme.
- Click any swatch to copy its HEX code, or copy all colours as CSS custom properties.
- Check the colours you plan to use for text with the Contrast Checker.
How it works
Schemes rotate the hue around the colour wheel while keeping saturation and lightness:
- Complementary: 0° and 180°
- Analogous: −30°, 0°, +30°
- Triadic: 0°, 120°, 240°
- Split-complementary: 0°, 150°, 210°
- Tetradic: 0°, 90°, 180°, 270°
- Monochromatic: the same hue at five lightness levels
Example
Pure red
The complementary colour of red #FF0000 is cyan #00FFFF; its triadic palette is red, green #00FF00 and blue #0000FF.
Privacy and limitations
- Palettes are generated in your browser.
- Colour theory gives starting points, not rules; adjust colours to suit your brand and check accessibility.
- The HSL colour wheel is not perceptually even, so some generated colours can look brighter than others.
Frequently asked questions
Which scheme should I use for a website?
Analogous and monochromatic palettes feel calm and cohesive; complementary and triadic palettes give strong accents. Many sites use one main colour, neutrals and one accent.
How do I use the CSS variables?
Paste them into your stylesheet and use them like color: var(--color-1);