Color Harmonies
Build complementary, triadic, tetradic, analogous, split and monochrome schemes from one color, computed in OKLCH.
Part of design tools.
OKLCH keeps the perceived lightness across the scheme; HSL is what classic color wheels do.
Drag the wheel, or focus the hue field and use the arrow keys (Page Up/Down for 15°).
Opposite hues — maximum tension, one accent against the base.
Some colors had their chroma lowered to fit inside sRGB — hue and lightness are untouched.
Three hues 120° apart — lively, still balanced.
Some colors had their chroma lowered to fit inside sRGB — hue and lightness are untouched.
Two complementary pairs — rich, needs one dominant color.
Some colors had their chroma lowered to fit inside sRGB — hue and lightness are untouched.
Neighbouring hues — calm, low contrast.
Some colors had their chroma lowered to fit inside sRGB — hue and lightness are untouched.
The complement split in two — contrast without the clash.
Some colors had their chroma lowered to fit inside sRGB — hue and lightness are untouched.
One hue, four lightness steps — safest of all.
Some colors had their chroma lowered to fit inside sRGB — hue and lightness are untouched.
The six schemes, and when each one works
A complementary pair is the loudest thing you can do with two colors: use it when one of them is an accent on a page dominated by the other. A triad stays lively while remaining balanced, a tetrad is richer but needs one clearly dominant color or it turns into noise. Analogous hues sit next to each other and read as calm, split-complementary keeps the contrast of a complement without the vibration, and a monochrome set is the one that never fails a review.
Why the angles are measured in OKLCH
Classic color wheels rotate hues in HSL, where the angle is arithmetic on RGB channels. Two hues 120° apart there have no reason to share the same perceived lightness: an HSL triad built from a yellow gives you a blue that looks far darker, and the set stops feeling like one family. OKLCH is a perceptual space, so rotating the hue while holding lightness and chroma gives accents that carry the same visual weight. Flip the toggle to HSL to see the difference on your own color — it is usually obvious on yellows and greens.
Out of gamut, and what gets dropped
A very saturated base can ask for a rotation that sRGB simply cannot display. Rather than clipping the channels, which shifts the hue, each derived color has only its chroma lowered until it fits — hue and perceived lightness stay where you put them. When that happens the scheme says so under its swatches: the colors are right, just less colorful than the base.
Greys, keyboard and sharing
A grey base has no hue to rotate, so the wheel says so instead of inventing an angle out of rounding noise. The wheel is draggable with a pointer and adjustable from the keyboard: focus the hue field and use the arrow keys, Page Up/Down for 15° jumps, Home and End for the ends of the circle. The base color and the selected scheme travel in the share link, so a set of accents can be reviewed by someone else in one paste.
Next steps for the colors you picked
Harmonies give you the hues; a design system needs tints of each of them. Drop any swatch into the palette generator for an 11-step scale, check the pairs you intend to ship with the contrast checker, and use the color converter to write them in whatever notation your codebase uses.