Color Wheel & Harmony Generator

Choose a color and see six harmony schemes built from it. Click any swatch to copy the hex.

Hex code

Preview

HSL

217° 91% 60%

Complementary

The two colors that sit directly across from each other on the wheel. Highest possible contrast.

BASE

#3B82F6

#F6AF3C

Analogous

Colors neighboring each other on the wheel. They share enough hue that they naturally get along.

#3CF6AF

#3CE0F6

BASE

#3B82F6

#523CF6

#AF3CF6

Triadic

Three colors at equal 120° intervals. Tends to read as energetic.

BASE

#3B82F6

#F63C83

#83F63C

Split-Complementary

Your base color and the two colors flanking its complement. Contrast without the intensity of a straight complementary pair.

BASE

#3B82F6

#F6523C

#E0F63C

Tetradic

Four colors evenly spaced around the wheel. Plenty to work with, though it gets busy fast if you treat them all as equals.

BASE

#3B82F6

#F63CE0

#F6AF3C

#3CF652

Monochromatic

One hue, different lightnesses. Safe to use, easy to control.

#D8E6FD

#9EC1FA

#6DA2F8

BASE

#3B82F6

#0A5ADB

#073C92

How color harmonies work

Complementary — Opposite sides of the wheel, maximum contrast. Works well for CTAs or anywhere you need something to stand out — a little goes a long way.

Analogous — Colors from the same part of the wheel. Blues into teals, reds into oranges. They don't fight each other, which makes them easy to build with.

Triadic — Equally spaced around the wheel. Can feel energetic, sometimes garish. Calms down when one color takes the lead and the others play supporting roles.

Split-Complementary — Like complementary, but shifted off the exact opposite to its two neighbors. Still punchy, but easier to work with.

Tetradic — A square or rectangle on the wheel. Four colors gives you range, but it's easy to end up with something busy. Picking one to dominate usually helps.

Monochromatic — One hue pulled lighter and darker. Reliable in a good way — useful for text hierarchies, card surfaces, or anywhere you want depth without introducing a new color.