Color Palette Generator

Generate harmonious color palettes using color theory — complementary, analogous, triadic, and more.

Base Color: #6366f1Type: AnalogousColors: 5Lightness: 67%

Presets:

Base color

Palette type

Generated Palette

#64adf2

#648af2

#6467f2

#8564f2

#a864f2

Color palette generation with color theory

A complementary palette uses the color directly opposite on the color wheel — high contrast, bold. An analogous palette picks neighbors (±15°–30°) for a harmonious, cohesive feel. A triadic palette spaces three colors 120° apart for a vibrant, balanced look. Tetradic (square) uses four colors at 90° intervals for maximum variety. Monochromatic varies lightness at a fixed hue for an elegant single-color theme. Click any swatch hex to copy it, or copy all values at once. For individual shades, try the Color Shades Generator, or Color Mixer to blend two specific colors.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Producing a harmonious palette from one base colour.
Comparing several harmony rules on the same starting colour.
Producing a full palette in one pass rather than one relationship at a time.
Widening an existing two-colour brand into something a whole interface can use.
Producing a starting set you then adjust for contrast.

Frequently Asked Questions

What makes a palette work?: A consistent relationship between the colours rather than a pleasant set of individual ones. Fixed saturation and lightness with evenly spaced hues produces harmony automatically; picking each colour independently almost never does, because the eye reads inconsistent lightness as noise.
How many colours does an interface actually need?: Fewer than most palettes provide. One primary, one accent, a neutral ramp of five or six greys, plus semantic colours for success, warning and error covers nearly every product. The neutrals do most of the work and are the part usually under-specified.
Why generate shades rather than picking them?: Because a shade ramp needs even perceptual steps, and hand-picked shades cluster. Interpolating lightness across a fixed number of steps gives predictable contrast between adjacent levels — which is what makes a token like `--grey-600` mean the same thing across a design system.
Should the palette be built in HSL or OKLCH?: OKLCH if the tool allows it. HSL's lightness is a geometric coordinate, not a measure of perceived brightness, so hsl(60, 100%, 50%) — yellow — looks far lighter than hsl(240, 100%, 50%) — blue. OKLCH's lightness is perceptual, so a ramp at fixed L genuinely looks even.
How do I check a palette is accessible?: By measuring every pairing you will actually use against WCAG's 4.5:1 for text and 3:1 for UI components. A palette that only works on white is common; the failure usually shows up first in a dark theme, where mid-tone colours lose contrast against the darker ground.

Common errors and gotchas

Adopting a palette without checking text contrast against each colour.
Producing colours that collapse to one appearance under colour vision deficiency.
Using every generated colour when a palette needs one or two accents.
Treating a harmony rule as a guarantee, when context decides whether it works.
Generating in a space where equal steps are not perceptually equal.