An OKLCH wheel is a map of hue angles, not a promise that every point is displayable. That distinction matters. Two colors can share lightness and chroma in the model while one fits sRGB and the other requires gamut mapping.
How to read the wheel
Hue wraps around the circle from 0° to 360°. Chroma moves outward from neutral gray. Lightness is a separate axis, so this generator holds it constant while it lays out a harmony. The preview then maps every result into the chosen display gamut.
The hue offsets used by the generator
| Harmony | Offsets from base | Useful starting point |
|---|---|---|
| Analogous | −60°, −30°, 0°, +30°, +60° | Closely related product families |
| Complementary | 0°, 180° | Strong subject/background tension |
| Split complementary | 0°, 150°, 210° | Contrast with less direct opposition |
| Triadic | 0°, 120°, 240° | Three distinct categories |
| Tetradic | 0°, 90°, 180°, 270° | Four roles that need clear separation |
| Monochromatic | One hue, varied L and C | Compact UI systems |
Why the wheel edge changes shape
Device gamuts are not perfect circles in OKLCH. Maximum available chroma changes with lightness and hue. CSS Color 4 therefore describes gamut mapping rather than naive channel clipping. The generator reports whether the original point fits sRGB and P3, then reduces chroma for the selected target when necessary.
Practical rule: if several harmony colors show large mapping changes, lower the shared chroma before changing their hue offsets. This preserves the relationship you chose.
From wheel to usable palette
- Select Harmony in the generator and enter the anchor color.
- Choose a relationship based on the number of roles you actually need.
- Adjust shared lightness and chroma while watching sRGB/P3 status.
- Move important foreground/background pairs into the contrast preview.
- Export named tokens and assign semantic roles in your product code.
The wheel establishes relationships; the ramp establishes hierarchy. For a full system, create the harmony first, then derive lightness ramps only for the hues that need interaction states.
Try the live wheel.
The harmony state can be copied into a shareable URL.
Sources and further reading
Technical claims are grounded in specifications and primary documentation. Product observations are dated snapshots from direct use.