Color palette generator
Generate complementary, analogous, triadic, split-complementary, monochromatic and tetradic palettes from any color. Free and instant.
Generate a color palette from any base color using the six classic color-harmony rules — complementary, analogous, triadic, split-complementary, monochromatic and tetradic. Everything runs locally in your browser, so nothing is uploaded and there is no account to create.
Every palette is computed in OKLCH, a perceptually uniform colour space, so the swatches stay visually balanced instead of drifting like raw-hex mixes. Change the base color or switch strategies and the palette regenerates instantly, with HEX values ready to copy.
Two hues opposite each other — high contrast, energetic. Want the full design system from this color? Open it in the generator.
Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
How to use this tool
- Enter or pick your base color — HEX, rgb() and hsl() input are all accepted.
- Choose a palette strategy such as complementary, triadic or analogous.
- Copy any swatch as HEX, or jump into the generator to turn the palette into a complete design system.
Frequently asked questions
- How does the color palette generator work?
- Pick or paste any color and choose one of six harmony strategies — complementary, analogous, triadic, split-complementary, monochromatic or tetradic. The palette is computed in OKLCH so every swatch stays perceptually consistent.
- Which palette harmonies are supported?
- All six classic color harmonies: complementary, analogous, triadic, split-complementary, monochromatic and tetradic. Switching strategies regenerates instantly.
- Is this palette generator free?
- Yes — completely free with no account required. Everything runs in your browser; your colors are never uploaded.
Related tools
Related guides
Design systems · 25 Aug 2026
How to build an accessible color palette (2026 guide)
Stop guessing at color combos. Here's how to turn one brand color into a full accessible palette that passes WCAG AA and AAA.
Short lessons · 23 Aug 2026
Turn a photo into a working color palette
Your brand color might already be hiding in a photo you love. Here's how to pull a palette from any image.
Design systems · 1 Sept 2026
One color to a working design system
Pick a color, and in one session have a design system that ships: scales, tokens, dark mode, a contrast pass, and exports your engineers can actually use.
Color palette generator runs entirely in your browser — nothing you enter is sent to a server.