Color Palette Generator
Build matching colour palettes from one colour — analogous, complementary, triadic and UI shades.
Runs in your browser — your data never leaves your device.
About the Color Palette Generator
Choosing colours that work together is easier with colour theory. Pick your main brand or theme colour and get palettes built on the colour wheel — neighbours (analogous), opposites (complementary), three evenly spaced colours (triadic) and more.
The Tints & shades option makes a 50–900 scale like modern design systems use, perfect for buttons, backgrounds and borders. Each swatch tells you whether white or dark text reads better on it.
How to use the Color Palette Generator
- Pick or type a base colour.
- Choose a palette type, or press Random for inspiration.
- Click a swatch to copy its HEX code, or copy all colours as CSS variables.
How it works
The base colour is converted to HSL (hue, saturation, lightness). Harmonies rotate the hue around the 360° colour wheel: complementary +180°, triadic ±120°, split complementary ±150°, analogous ±15–30°. Shades keep the hue and step the lightness from 95% to 12%.
Examples
- Base
#0260A2(blue) → complementary #A24402 (orange). - Triadic of the same blue → blue, #A20260 (magenta) and #60A202 (green).
Frequently asked questions
Are these colours accessible?
Each swatch suggests white or dark text, but always check important text with our Contrast Checker.