Color Palette Generator
Build harmonious colour palettes from any base colour using complementary, analogous, triadic, tetradic or monochromatic harmony. Each swatch shows a readable hex code, copy in your browser.
Tap a swatch to copy its hex.
How it works
Your base colour is converted to HSL (hue, saturation, lightness) and the harmony is built by rotating the hue around the colour wheel. Complementary uses the opposite hue (180°), triadic spreads three colours 120° apart, analogous stays nearby, and monochromatic varies only the lightness.
Each swatch shows its hex code in black or white (whichever has better contrast, following the WCAG luminance formula) so the label always stays readable.
All colour maths runs in your browser; nothing is uploaded.
What this does
A color palette generator builds harmonious palettes from a base colour using complementary, analogous, triadic, tetradic or monochromatic harmony.
How to use it
- Pick a base colour.
- Choose a harmony type.
- Read the generated swatches.
- Copy any hex code.
How it works
The base colour is converted to HSL and the harmony is made by rotating the hue around the wheel (180° for complementary, three colours 120° apart for triadic) while monochromatic varies the lightness instead.
Example
A complementary palette pairs a colour with the one opposite it on the wheel, 180° away.
Sources & methodology
Last updated .
Frequently asked questions
How are the palettes built?
Your base colour is converted to HSL and the harmony is created by rotating the hue around the colour wheel, for example 180° for complementary or three colours 120° apart for triadic. Monochromatic instead varies the lightness.
Why is the hex label sometimes black and sometimes white?
Each label is shown in whichever of black or white has the higher contrast against the swatch, using the WCAG luminance formula, so it always stays readable.
Is my colour data private?
Yes. All colour calculations run locally in your browser; nothing is transmitted.
Related tools
Color Converter
Convert a colour between HEX, RGB and HSL. Type any format or pick from the swatch and copy the others instantly, with a live preview. Fast and private, all in your browser.
Contrast Checker
Check the contrast ratio between a text and background colour against WCAG AA and AAA levels, with a live preview and instant pass/fail for normal and large text. Runs in your browser.
Gradient Generator
Build CSS linear and radial gradients with as many colour stops as you like, an adjustable angle and a live preview. Copy the ready-to-use background value. Private and in-browser.
JSON Formatter
Pretty-print, validate and minify JSON, with selectable indentation and optional recursive key sorting. Syntax errors are pinpointed by line and column. Fast and private, all in your browser.