sRGB vs OKLAB
The difference between muddy and clean color blending.Copy
┌─────────────────────────────────────────────────────────────────┐
│ │
│ THE MUDDY MIDDLE PROBLEM │
│ │
│ When blending Blue to Yellow: │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ sRGB (Old Way) │ │
│ │ │ │
│ │ ████████▓▓▓▓▓▓▒▒▒▒▒▒░░░░░░▒▒▒▒▒▒▓▓▓▓▓▓████████ │ │
│ │ BLUE muddy GRAY muddy YELLOW │ │
│ │ brown (dull) brown │ │
│ │ ^ │ │
│ │ | │ │
│ │ Desaturated! │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ OKLAB (Modern Way) │ │
│ │ │ │
│ │ ████████████████████████████████████████████████ │ │
│ │ BLUE cyan VIBRANT lime YELLOW │ │
│ │ GREEN │ │
│ │ ^ │ │
│ │ | │ │
│ │ Saturated! │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Why This Happens
Copy
┌─────────────────────────────────────────────────────────────────┐
│ │
│ sRGB: DESIGNED FOR SCREENS │
│ ───────────────────────── │
│ │
│ G (Green) │
│ ^ │
│ | +--------+ │
│ | /| /| │
│ | / | / | │
│ | +--------+ | The "straight line" in this │
│ | | | | | box passes through the CENTER │
│ | | +-----|--+ where colors are GRAY │
│ | | / | / │
│ | |/ |/ │
│ | +--------+ │
│ +----------------------> R (Red) │
│ / │
│ v B (Blue) │
│ │
│ Problem: Straight line in cube = Muddy path │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ OKLAB: DESIGNED FOR HUMAN EYES │
│ ────────────────────────────── │
│ │
│ L (Lightness) │
│ ^ │
│ | . . . │
│ | . . │
│ | . . │
│ | . + . The "straight line" in this │
│ | . . cylinder stays at constant │
│ | . . distance from center (saturated) │
│ | . . . │
│ +----------------------> a (green-red) │
│ / │
│ v b (blue-yellow) │
│ │
│ Solution: Straight line in cylinder = Clean path │
│ │
└─────────────────────────────────────────────────────────────────┘
Side-by-Side Comparison
Copy
┌─────────────────────────────────────────────────────────────────┐
│ │
│ RED TO BLUE │
│ ─────────── │
│ │
│ sRGB Path: │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ RED ▶ muddy ▶ brown ▶ purple-ish ▶ gray ▶ BLUE │ │
│ │ ^ ^ ^ ^ ^ ^ │ │
│ │ | | | | | | │ │
│ │ 0% 20% 40% 60% 80% 100% │ │
│ │ │ │
│ │ The path is UNPREDICTABLE │ │
│ │ Intermediate colors feel "dirty" │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ OKLAB Path: │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ RED ▶ pink ▶ magenta ▶ violet ▶ purple ▶ BLUE │ │
│ │ ^ ^ ^ ^ ^ ^ │ │
│ │ | | | | | | │ │
│ │ 0% 20% 40% 60% 80% 100% │ │
│ │ │ │
│ │ The path is PREDICTABLE │ │
│ │ Intermediate colors are vibrant │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ GREEN TO YELLOW │
│ ─────────────── │
│ │
│ sRGB Path: │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ GREEN ▶ muddy ▶ olive ▶ brown-ish ▶ YELLOW │ │
│ │ │ │
│ │ Even nearby colors have uneven transitions │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ OKLAB Path: │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ GREEN ▶ lime ▶ chartreuse ▶ yellow-green ▶ YELLOW │ │
│ │ │ │
│ │ Smooth, predictable, visually even steps │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
The Color Space Journey
Copy
┌─────────────────────────────────────────────────────────────────┐
│ │
│ LIGHTNESS CHART: BLUE TO YELLOW │
│ │
│ Lightness │
│ ^ │
│ | │
│ 1.0 + * Yellow │
│ | / │
│ | sRGB path / │
│ 0.7 + ........ * OKLAB path │
│ | ... ... / (stays saturated) │
│ | .. ../ │
│ 0.5 + *-----------* │
│ | / ^ \ │
│ | / | \ │
│ 0.3 + / MUDDY \ │
│ | / ZONE \ │
│ 0.0 + * Blue \ │
│ +----+----+----+----+----+----+----> Chroma │
│ 0 0.1 0.2 0.3 0.4 0.5 │
│ │
│ sRGB: Curves INWARD (loses saturation) │
│ OKLAB: Stays at constant saturation │
│ │
└─────────────────────────────────────────────────────────────────┘
OKLAB vs OKLCH
Copy
┌─────────────────────────────────────────────────────────────────┐
│ │
│ SAME COLOR SPACE, DIFFERENT COORDINATES │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ OKLAB (Cartesian) OKLCH (Polar) │
│ ───────────────── ──────────────── │
│ │
│ a+ 0deg (Red) │
│ | | │
│ | P(a, b) P * │
│ | / (C,H) / │
│ | / / C (radius) │
│ | / / H (angle) │
│ b- --+-- b+ 270deg --+-- 90deg │
│ | | │
│ | 180deg │
│ a- │
│ │
│ Best for: Best for: │
│ BLENDING colors DEFINING colors │
│ (straight line) (hue, saturation, brightness) │
│ │
└─────────────────────────────────────────────────────────────────┘
Key Takeaways
Copy
┌─────────────────────────────────────────────────────────────────┐
│ │
│ QUICK REFERENCE │
│ │
│ ┌─────────────┬──────────────────┬──────────────────────────┐ │
│ │ Aspect │ sRGB │ OKLAB │ │
│ ├─────────────┼──────────────────┼──────────────────────────┤ │
│ │ Designed │ Display hardware │ Human perception │ │
│ │ for │ │ │ │
│ ├─────────────┼──────────────────┼──────────────────────────┤ │
│ │ Blending │ Muddy middle │ Clean transition │ │
│ │ result │ │ │ │
│ ├─────────────┼──────────────────┼──────────────────────────┤ │
│ │ Predictable │ Low │ High │ │
│ ├─────────────┼──────────────────┼──────────────────────────┤ │
│ │ Use case │ Legacy │ Modern color work │ │
│ └─────────────┴──────────────────┴──────────────────────────┘ │
│ │
│ THE MONOLEX CHOICE: │
│ ──────────────────── │
│ │
│ Define colors in OKLCH (easy to understand) │
│ Blend colors in OKLAB (no muddy middle) │
│ │
│ When colors need to flow from one to another, │
│ OKLAB ensures clarity. │
│ │
└─────────────────────────────────────────────────────────────────┘