OKLCH chromatic compass

Turn one color into a working palette.

Plot real color relationships on a perceptual wheel. The source stays exact, every companion is mapped honestly to sRGB, and contrast evidence travels with the palette.

Current geometryComplementary

01 / Harmony geometry

Choose the relationship, not a random mood.

Each scheme rotates the same lightness and chroma around the OKLCH hue axis. That keeps the mathematical rule inspectable while preserving the exact input as the first swatch.

Complementary

The base hue and its 180° opposite form the strongest two-point separation.

01
#7C3AED
oklch(54.134% 0.24659 293.009)
Inspect ↗
02
#717600
oklch(54.134% 0.24659 113.009)Mapped to sRGB
Inspect ↗

02 / Contrast ledger

Check the pair before assigning the role.

Black and white ratios are calculated from each rendered sRGB fallback. The stronger option is named, but component context still decides whether it is usable.

ColorBlack textWhite textStronger pair

#7C3AED3.69:15.70:1#FFFFFF

#7176004.29:14.89:1#FFFFFF

These ratios apply only to opaque text and background pairs. Body text, large text, controls, borders, states, and focus indicators still need checks in the final interface.

03 / Developer handoff

Copy the palette without translating it again.

Stable custom-property names and six-digit sRGB fallbacks make the result ready for a stylesheet, design token file, or quick prototype.

:root {
  --color-harmony-1: #7C3AED;
  --color-harmony-2: #717600;
}

04 / Method and limits

A deterministic starting point, not a taste guarantee.

Perceptual hue rotation

Harmony angles rotate the source hue in OKLCH while preserving its lightness and chroma. The first color always remains the exact entered sRGB value.

Explicit gamut mapping

A rotated OKLCH color may sit outside sRGB. Hexees uses its CSS Color 4 gamut mapping and marks every affected fallback instead of silently clipping channels.

Contrast is role-specific

Harmony does not imply readability. Use the table for a first text-pair check, then verify the actual component, size, state, and non-text boundaries.

Open the contrast checker →