Color Palette Generator
Build harmonious color palettes from any base color 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 color is converted to HSL (hue, saturation, lightness) and the harmony is built by rotating the hue around the color wheel. Complementary uses the opposite hue (180°), triadic spreads three colors 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 color math runs in your browser; nothing is uploaded.
What this does
A color palette generator builds harmonious palettes from a base color using complementary, analogous, triadic, tetradic or monochromatic harmony.
How to use it
- Pick a base color.
- Choose a harmony type.
- Read the generated swatches.
- Copy any hex code.
Example
A complementary palette pairs a color with the one opposite it on the wheel, 180° away.
Last updated .
Frequently asked questions
How are the palettes built?
Your base color is converted to HSL and the harmony is created by rotating the hue around the color wheel, for example 180° for complementary or three colors 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 color data private?
Yes. All color calculations run locally in your browser; nothing is transmitted.
Related tools
Color Converter
Convert a color 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 color 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 color 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.