Color Palette Generator

Pick a color on the wheel — the tool builds a ready-made palette using one of six classic schemes: complementary, analogous, triadic, tetradic, split-complementary or monochromatic. Everything runs in your browser.

Click or drag on the ring to pick a hue
70%
50%

Palette

Export

        

About color schemes

A color scheme is a rule for combining colors based on their position on the wheel. Palettes built this way feel natural to the eye and help you put together clean interfaces, illustrations and brand systems. Here are the six classic schemes and what each is good for.

Complementary

Two colors directly opposite each other on the wheel (180°). Maximum contrast — the eye snaps to it instantly. Works for accents: a base UI color plus a punchy CTA button. Don't overuse it: too much pure complementary contrast tires the eye fast.

Analogous

Neighboring hues on the wheel (±30°). A calm scheme with natural transitions — think sunset or foliage. Good for backgrounds, nature illustrations and soft UI. Pick one as the lead and let the others support it.

Triadic

Three hues evenly spaced around the wheel (120° apart). Vibrant and balanced: one color leads, the other two add accents. Popular in illustrations, games and playful interfaces.

Tetradic

Four colors arranged as two complementary pairs. A rich palette, but it needs balance: one color leads, the rest support. Harder to pull off than triadic — easy to overload the composition.

Split-complementary

A base color plus the two neighbors of its opposite (180° ± 30°). Keeps most of the complementary contrast but feels softer and less aggressive. A safe pick for UI and branding when you want a noticeable but not loud accent.

Monochromatic

A single hue in different lightness and saturation. Minimal and elegant. Great for content-driven interfaces with strong typography — common in material and flat design.

Free online palette generator built around an HSL wheel. Pick a hue on the interactive ring, tweak saturation and lightness — the tool instantly builds a palette in the chosen scheme.

Six classic color schemes are covered: complementary (180°), analogous (±30°), triadic (120°), tetradic, split-complementary (180°±30°) and monochromatic. The result can be copied as HEX, RGB, HSL, CSS variables or a Tailwind config snippet.

Everything runs locally — no data leaves your browser. Handy for designers, frontend devs and illustrators — anyone who needs to put a palette together quickly.