Color Wheel
Turn the wheel, pick a base color, and see six harmony schemes update live — complementary, analogous, triadic, tetradic, split-complementary and monochromatic — computed in the perceptual OKLCH space so every partner color actually matches. Free and 100% in your browser.
The color directly opposite on the wheel — maximum hue contrast.
| Scheme | Preview |
|---|---|
Reading the wheel
The color wheel is geometry for a simple promise: hues that sit in a fixed angular relationship tend to work together. Opposites cancel and intensify each other; neighbors blend; evenly spaced triples feel deliberate. The wheel above is fully interactive — drag the ring to choose a hue, then set how vivid and how bright the base color is inside the square. Every scheme in the table recalculates instantly.
The six classic harmonies, honestly ranked by difficulty
- Monochromatic — one hue through several lightness levels. Impossible to clash; risk of boredom, cured with strong lightness contrast.
- Analogous — neighbors within about 30°. Nature’s default (sunsets, foliage); needs one clear lead color.
- Complementary — exact opposites. Maximum energy; use asymmetrically (roughly 80/20), never half-and-half.
- Split-complementary — the two colors flanking the opposite. Complementary’s tension with training wheels.
- Triadic — three hues 120° apart. Playful and balanced; mute two, saturate one.
- Tetradic — two complementary pairs. The hardest to control; pick one dominant and demote the rest to accents.
Why this wheel computes in OKLCH
Most online wheels rotate hue in HSL and quietly break their own promise: an HSL rotation of a pleasant blue can return a neon yellow-green that shares nothing with the base but a number. The reason is that HSL treats all hues as equally light, and human eyes don’t. This wheel rotates hue in OKLCH, where lightness and chroma are perceptual quantities — so a soft base color gets soft partners, and a punchy base gets punchy ones. When a rotated color would leave what screens can display, it is gamut-mapped by the CSS Color 4 algorithm instead of being clipped into a different-looking color.
From scheme to project
Every swatch copies its hex on click, and “Save scheme” drops the whole harmony into My colors — the tray that follows you across this site. A sensible next step: check your text-and-background candidates in the contrast checker, or hand a favorite color to the shades generator for a full 50–900 ramp. Everything runs locally in your browser; nothing you pick is uploaded anywhere.
Three practical rules that outrank any harmony
- 60-30-10: dominant color ~60% of the surface, secondary ~30%, accent ~10%. A perfect palette used in equal thirds still looks chaotic.
- Contrast beats hue: if a design reads badly in grayscale, no harmony rule will save it — lightness structure comes first.
- Repeat colors: a palette works when each color appears more than once; single-use colors read as accidents.
Frequently asked questions
How do I use a color wheel to combine colors?
Pick your base color on the wheel, then let a harmony rule choose the partners: the opposite color for maximum contrast (complementary), the neighbors for calm schemes (analogous), or evenly spaced hues for balanced variety (triadic, tetradic).
Why do the harmony colors here look more balanced than on other wheels?
The rotations run in OKLCH, a perceptually uniform color space, so partner colors keep the base color’s perceived lightness and vividness. Classic HSL wheels rotate raw hue and routinely produce partners that glow or turn muddy.
What is the difference between complementary and split-complementary?
Complementary uses the exact opposite hue — strong but sometimes harsh. Split-complementary takes the two hues beside the opposite (150° and 210° away), keeping the contrast while softening the clash.
Which harmony should a beginner start with?
Monochromatic is almost impossible to get wrong, and analogous is a close second. Save complementary pairs for accents — one dominant color plus a small dose of its opposite.
Can I save or export a scheme?
Yes — “Save scheme” puts every color of the active harmony into My colors, the tray shared by all tools here, and each swatch copies its hex with one click. Everything runs 100% in your browser.