Color Wheel
Drag around the wheel to pick a base color and see its complementary, analogous, triadic and tetradic partners instantly. Built in OKLCH, so every color at the same lightness looks equally bright.
:root {
--wheel-1: oklch(0.623 0.188 259.8); /* #3b82f6 */
--wheel-2: oklch(0.623 0.129 79.8); /* #af7d00 */
}Color wheel harmonies
Complementary colors sit opposite each other (180°) and give the strongest contrast. Analogous colors are neighbours (±30°) and feel calm and cohesive. Triadic colors are evenly spaced at 120°, which keeps several hues balanced. Split-complementary uses the two colors either side of the complement (150° and 210°), a softer alternative to a straight complement. Tetradic schemes use four hues 90° apart and work best when one hue leads.
Primary, secondary and tertiary colors
On a light-based (RGB) wheel the primaries are red, green and blue, and the secondaries where they overlap are cyan, magenta and yellow. Tertiary colors sit between a primary and a neighbouring secondary, such as orange, chartreuse, azure and violet. The painter’s RYB wheel uses red, yellow and blue as primaries instead, which is why paint complements differ slightly from screen ones.
Why a perceptual wheel
A classic HSL wheel puts every hue at the same numerical lightness, but yellow looks far brighter than blue. This wheel uses OKLCH, so rotating around it changes only the hue you perceive. The faded areas show colors a standard sRGB screen can’t display at the chosen lightness, which is why bright blues and dark yellows don’t exist.
From wheel to interface
A harmony gives you hues, not a finished UI palette. Use one hue as the brand color, keep the rest as accents, and generate a full 50–950 ramp for each with the color scale generator before checking text contrast.
Frequently asked questions
- How do you use a color wheel?
- Pick a base color, then use the wheel's geometry to find colors that work with it: the color directly opposite is its complement, its neighbours are analogous, and colors evenly spaced around the wheel form triadic or tetradic schemes. Drag the marker on the wheel above and the matching colors move with it.
- What are the complementary colors on the color wheel?
- Complementary colors sit 180° apart, such as blue and orange or red and teal. They give maximum hue contrast, so one usually dominates while the other is used sparingly as an accent.
- Why does this color wheel look different from the one I learned in art class?
- Art classes teach the RYB (red, yellow, blue) wheel, built for mixing paint. Screens mix light, so this wheel is built in OKLCH, a perceptual color space where every hue at the same lightness looks equally bright. Complements differ slightly between the two: on screen, blue's complement is a yellow-orange rather than pure orange.
- Why is part of the wheel faded?
- Not every hue can be equally saturated at every lightness on an sRGB screen. The faded area shows colors outside the sRGB gamut at the current lightness; picking there clamps to the nearest displayable color.