Colour Palette Generator
Build colour schemes from a base hue — complementary, analogous, triadic, split-complementary, tetradic, and monochromatic.
- palette
- scheme
- harmony
- complementary
- analogous
- triadic
- tetradic
- monochromatic
About Colour Palette Generator
A colour palette is a small set of hues that work together. Designers reach for one of half a dozen named "harmonies" — relationships on the colour wheel that produce reliably pleasing results. Complementary palettes use the two hues directly opposite each other (high contrast, energetic). Analogous palettes group three adjacent hues (calm, harmonious). Triadic palettes pick three points 120° apart (vivid but balanced). Split-complementary softens a complementary by replacing the opposite hue with its two neighbours. Tetradic uses two complementary pairs at right angles. Monochromatic explores tints and shades of a single hue.
This generator computes each harmony directly from the HSL hue of the base colour you pick. Hue rotations are mathematical, not curated, so the output is consistent and reproducible — and the saturation and lightness of each swatch stay matched to the base, giving the palette internal cohesion.
How to use
Pick a base colour by clicking the swatch (native colour picker) or typing a hex value in the field next to it. The six palette sections below update instantly. Each swatch shows its hex code, its HSL coordinates, and a contrast-aware label.
Click any individual swatch to copy its hex code. Click "Copy all" on a palette card to copy every hex code for that harmony as a comma-separated list — handy for pasting into Tailwind config, Figma styles, or a design-token file. The URL preserves your base colour so you can bookmark or share.
Frequently asked questions
How do I pick a base colour for a brand palette?
Start from any anchor — a logo colour, a brand reference, or a colour with the right emotional weight (warm reds for energy, cool blues for trust, greens for growth/health). Once you have it, the harmony generator gives you mathematically valid companions. The base doesn't have to be the dominant brand colour in the final design; sometimes it's easier to back into a palette from a complementary accent and use one of the other slots as your primary.
Which harmony works best for what?
Complementary is loud and high-contrast — good for call-to-action buttons against a neutral page, but tiring across large surfaces. Analogous is restful and natural — landscapes, calming products. Triadic is balanced but vivid — playful brands, dashboards. Split-complementary keeps complementary's energy without the harshness — most general-purpose websites. Tetradic gives you four colours and is hard to balance — use sparingly. Monochromatic is the safest starting point for product UIs.
Why don't my monochromatic swatches look like exact tints and shades?
They are tints and shades by lightness — the HSL L coordinate is varied while H and S are held constant. But our eyes don't perceive HSL lightness linearly: human perception of "lightness" is closer to OKLCH or LAB. The HSL approach used here is fast and looks fine in practice; for perceptually-uniform palettes (where each step looks like the same lightness jump) you'd want a tool that works in OKLCH or LAB colour space.
Can I pick the saturation and lightness separately from the base?
Not in this version — the palette adjusts hue only and inherits saturation and lightness from the base. The intent is to keep palettes internally consistent: if you want a different "key" (more washed-out, darker, more saturated), change the base colour's S or L first via the colour converter or your picker, then let the palette regenerate.
Are these palettes WCAG-accessible?
Not automatically. Harmony only addresses how colours look together; accessibility requires sufficient contrast between text and background, which depends on luminance, not hue relationship. Build the palette here, then run individual pairs through the contrast checker before committing to a foreground/background combination.