OKLCH in CSS: Why We Moved From RGB and HSL—Martian Chronicles, Evil Martians’ Team Blog

Metadata

• Author: color picker
• Full Title: OKLCH in CSS: Why We Moved From RGB and HSL—Martian Chronicles, Evil Martians’ Team Blog
• URL: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

Highlights

It may sound complex, but some seeing some examples can help illustrate: :root { —error: oklch(60% 0.16 30); } .message.is-error { /* The same color but with different opacity / background: oklch(from var(—error) l c h / 60%); / 10% darker / border-color: oklch(from var(—error) calc(l - 10%) c h) } .message.is-success { / Another hue (green) with the same lightness and saturation */ background: oklch(from var(—error) l c 140); } (View Highlight)