Using color harmonies

A harmony picks hues by where they sit on the color wheel: opposite, evenly spaced or side by side. It's a starting point for a palette, not a rule. Pick a base color, try a few schemes with Compare all, and adjust from there.

The schemes

Complementary
The base and the hue opposite it. Use one as the main color and the other sparingly, for buttons and highlights. In equal amounts, the two fight for attention.
Split complementary
The base and the two hues either side of its opposite. Lead with the base. The two split colors make softer accents than a straight complement, so they can share a page without clashing.
Analogous
The base and its neighbors. Pick one as the main color and use the others as accents, then add a neutral for text and backgrounds.
Triadic
Three hues spaced evenly. Let one color dominate and keep the other two small, for a lively palette that still holds together.
Tetradic
Two complementary pairs forming a rectangle. Pick one pair to lead and keep the other pair for accents and details.
Square
Four hues spaced evenly. Four equally strong hues get busy fast: pick one to lead and keep the other three small.
Similar
Five close neighbors. Reads as one color family: good for calm brands, charts that need related colors, and gentle gradients.
Monochromatic
One hue from light to dark. Use the lightest for backgrounds, the middle for the main color and the darkest for text. Add a second hue if buttons need to stand out.

Questions

Which harmony should I start with?

For a product or brand, analogous or split complementary is the safest start: one clear lead color with accents that don't compete. Complementary gives the strongest contrast for calls to action. Triadic, tetradic and square make lively palettes, but they need one color to lead. Compare all, at the end of the scheme picker, shows every scheme for your color at once.

How much of each color should I use?

A common starting point is 60-30-10: about 60% for the dominant color (usually a background), 30% for a secondary color (surfaces and sections) and 10% for an accent (buttons, links and highlights). Text and backgrounds usually come from greys tinted with the lead color rather than from the harmony itself.

Do harmony colors pass contrast checks?

Not automatically. Colors in a harmony often share a lightness, so they can look distinct and still fail WCAG contrast as text on each other. Turn on Vary lightness to get lights and darks, check each pair in the side panel, or open the palette in the Contrast Checker.

Why does this wheel use OKLCH instead of HSL?

HSL spaces hues evenly by the numbers, not by how they look: a yellow at 50% lightness looks far brighter than a blue at 50%. OKLCH is designed to match perception, so colors with the same lightness look equally light and hue steps look even. That's why a triad here comes out balanced. Switch to the HSL wheel in the header to compare.

What do the dashed line, the tick and the hatching mean?

They mark color gamuts, the range of colors a screen can show. On the OKLCH wheel, the edge of the disc is the Display P3 gamut at the current lightness, and the dashed line inside it is the sRGB limit. On the chroma slider, the white tick is the sRGB limit and the hatched end is beyond P3. Colors between the two are wide-gamut.

Should I use wide-gamut (P3) colors?

Recent Apple devices and many newer phones and laptops show Display P3, and other screens show the nearest sRGB color, so P3 colors are safe to use as long as that fallback works. In CSS, write them as oklch() or color(display-p3 …). Hex, RGB and HSL values are always sRGB, which is why the tool shows the nearest sRGB match for them.

What's the difference between warm and cool colors?

Warm hues (reds, oranges and yellows) feel energetic and tend to come forward. Cool hues (blues, greens and purples) feel calmer and tend to recede. A complementary pair usually sets a warm color against a cool one, which is part of why it contrasts so strongly.

Who invented the color wheel?

Isaac Newton arranged the colors of the spectrum in a circle in Opticks (1704). Later wheels, from Goethe's to the red-yellow-blue wheel taught in art classes, changed the colors and their spacing. Digital tools mostly use HSL's red-green-blue wheel, and perceptual spaces like OKLCH are a more recent step.

How do I use the palette in other tools?

Export it as CSS variables, Tailwind v4 theme colors, JSON, SVG or PNG, or copy a share link. Under Take it further in the side panel, you can open it on a website in Fauxsite, check its strongest text pair in the Contrast Checker, or see tint scales of any color.