What is OKLCH?
OKLCH is a way to describe colors that matches how humans actually perceive them. Unlike traditional color systems, when you change one value, you get predictable visual results.┌──────────────────────────────────────────────────────────────────────────────┐
│ HOW OKLCH WORKS │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Think of color as a 3D space: │
│ │
│ LIGHTNESS (L) │
│ ^ │
│ │ 100% White │
│ │ . │
│ │ /│\ │
│ │ / │ \ │
│ │ / │ \ │
│ │ / │ \ │
│ │ / ── + ── \ <── HUE (H) goes around │
│ │ / │ \ the circle (0-360) │
│ │ │ │
│ │ . │
│ │ 0% Black │
│ │ │
│ CHROMA (C) = Distance from center │
│ (0 = gray, 0.4 = vivid) │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
The Three Components
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ L = LIGHTNESS │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ 0% 50% 100% │ │
│ │ [========================================================] │ │
│ │ Black ─────────────────> Gray ─────────────────> White │ │
│ │ │ │
│ │ Key insight: L = 50% looks equally "medium" for ALL colors │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ C = CHROMA (Color Intensity) │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ 0 0.15 0.4 │ │
│ │ [========================================================] │ │
│ │ Gray ─────────────────> Subtle ─────────────────> Vivid │ │
│ │ │ │
│ │ Monolex uses 0.12-0.15 for professional, readable colors │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ H = HUE (Color Wheel Position) │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 0 (Red) │ │
│ │ │ │ │
│ │ 300 ───────.─────── 60 │ │
│ │ (Magenta) │ (Yellow) │ │
│ │ │ │ │
│ │ 240 ───────.─────── 120 │ │
│ │ (Blue) │ (Green) │ │
│ │ │ │ │
│ │ 180 (Cyan) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Why OKLCH Matters
Traditional color systems like HSL have a problem: the same “lightness” value produces different perceived brightness for different colors.┌──────────────────────────────────────────────────────────────────────────────┐
│ THE HSL PROBLEM │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Using HSL with L=50% for both colors: │
│ │
│ Yellow (H=60): [XXXXXXXXXXXXXXXXXXXXXXXX] <── Appears BRIGHT │
│ Blue (H=240): [........................] <── Appears DARK │
│ │
│ Same L=50%, but completely different perceived brightness! │
│ │
├──────────────────────────────────────────────────────────────────────────────┤
│ THE OKLCH SOLUTION │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Using OKLCH with L=55% for both colors: │
│ │
│ Yellow (H=85): [XXXXXXXXXXXXXXXXXXXX] <── Equal perceived brightness │
│ Blue (H=230): [XXXXXXXXXXXXXXXXXXXX] <── Equal perceived brightness │
│ │
│ L=55% means the SAME perceived brightness for ALL hues. │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Color Conversion Flow
┌──────────────────────────────────────────────────────────────────────────────┐
│ FROM SCREEN TO PERCEPTION │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ RGB Oklab OKLCH │
│ (Screen Pixels) (Perceptual Space) (Human-Friendly) │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ R: 35 │ │ L: 0.55 │ │ L: 55% │ │
│ │ G: 128 │ ---> │ a: -0.02│ ---> │ C: 0.15 │ │
│ │ B: 199 │ │ b: -0.10│ │ H: 230 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ What hardware Math space What designers │
│ understands (accurate) work with │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Safe Ranges for UI
┌──────────────────────────────────────────────────────────────────────────────┐
│ PRACTICAL OKLCH VALUES │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ LIGHTNESS (L): │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Dark Theme Text: L = 70% (readable on dark backgrounds) │ │
│ │ Light Theme Text: L = 40% (readable on light backgrounds) │ │
│ │ Semantic Colors: L = 55% (balanced for both themes) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
│ CHROMA (C): │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ UI Elements: C = 0.12 (subtle, professional) │ │
│ │ Semantic Colors: C = 0.15 (noticeable but not loud) │ │
│ │ Maximum Safe: C = 0.18 (danger/error only) │ │
│ │ │ │
│ │ Above 0.18 risks "clipping" - colors may not display correctly │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Key Takeaways
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ 1. OKLCH uses three values: Lightness, Chroma, Hue │
│ │
│ 2. Unlike HSL, equal L values = equal perceived brightness │
│ │
│ 3. Chroma controls vividness (0 = gray, higher = more colorful) │
│ │
│ 4. Hue is position on color wheel (0-360 degrees) │
│ │
│ 5. Monolex uses L=55%, C=0.12-0.15 for consistent UI colors │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Golden Angle Distribution
Learn how colors are distributed for maximum distinction