Color Palette Generator

Pick a base color and a harmony rule to get a matching palette with HEX codes you can copy. It uses color-wheel (HSL) math for complementary, analogous, triadic and more — all in your browser.

Pick a base color and harmony to build a palette.

Color harmony basics

Color harmonies are built on the color wheel — the hue (H) component of HSL, measured 0–360°. A harmony rule picks other hues at fixed angles from your base, which is why the results look balanced rather than random.

complementary = +180°  analogous = ±30°  triadic = ±120°

This generator converts your base color to HSL, rotates the hue by the rule's angles (keeping saturation and lightness for most rules), and converts back to HEX for each swatch.

Worked example

From a blue base at hue ≈ 217°, a complementary palette:

Base: blue at 217°.
Complement: 217° + 180° = 37° → an orange.
Result: a blue/orange pairing plus lighter and darker tints to round out the scheme.

Using palettes in design

Complementary schemes are high-contrast and great for calls to action; analogous schemes (neighboring hues) feel calm and cohesive; triadic schemes are vivid but balanced. A common approach is to choose one dominant color, one accent and a couple of neutrals. Always check text/background pairs for sufficient contrast for readability.

Tip: need the RGB or HSL of a single color? Use the HEX to RGB converter or color picker.

Frequently asked questions

What harmony types are included?

Complementary (opposite hue), analogous (neighboring hues ±30°), triadic (three hues 120° apart), tetradic (two complementary pairs) and monochrome (one hue at different lightnesses).

Which color model does it use?

It works in HSL — hue, saturation, lightness — because rotating the hue on the color wheel is how harmonies are defined. Results are shown as HEX for easy use in CSS.

Can I copy the colors?

Yes. Each swatch shows its HEX code and copies to your clipboard with one click, ready to paste into CSS, a design tool or a brand guide.

Is anything uploaded?

No. All the color math runs in your browser. Nothing about your palette is sent to a server.

MB
Mustafa Bilgic · Editor, Calcool
Builds palettes by rotating the HSL hue on the color wheel (complementary +180°, analogous ±30°, triadic ±120°), then converting to HEX. Everything runs in your browser — nothing you enter is uploaded, logged or stored.

Related calculators

🌈 CSS Gradient Generator🎨 Color Picker🌈 HEX to RGB Converter🟦 Box Shadow Generator