Skip to main content

​
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