OKLCH in CSS: Why We Moved From RGB and HSL
Metadata
- Author: Jerod Santo
- Full Title: OKLCH in CSS: Why We Moved From RGB and HSL
- URL: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
Highlights
The extremely short version
oklch() is a new way to define CSS colors. In oklch(L C H) or oklch(L C H / a) each item corresponds as follows:
• L is perceived lightness (0%-100%). “Perceived” means that it has predicted contrast, unlike L in hsl().
• C is chroma, from gray to the most saturated color.
• H is the hue angle (0-360).
• a is opacity (0-1 or 0-100%).
a:hover {
background: oklch(45% 0.26 264); /* blue /
color: oklch(100% 0 0); / white /
color: oklch(0% 0 0 / 50%); / black with 50% opacity */
} (View Highlight)
OKLCH has an another interesting feature: device independence; OKLCH wasn’t just created for current monitors with sRGB colors. (View Highlight)
If you don’t have a build tool, we recommend using Vite or compiling your CSS with the lightningcss CLI. (View Highlight)
OKLCH in CSS: Why We Moved From RGB and HSL
Metadata
- Author: evilmartians.com
- Full Title: OKLCH in CSS: Why We Moved From RGB and HSL
- URL: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
Highlights
The extremely short version
oklch() is a new way to define CSS colors. In oklch(L C H) or oklch(L C H / a) each item corresponds as follows:
• L is perceived lightness (0%-100%). “Perceived” means that it has predicted contrast, unlike L in hsl().
• C is chroma, from gray to the most saturated color.
• H is the hue angle (0-360).
• a is opacity (0-1 or 0-100%).
a:hover {
background: oklch(45% 0.26 264); /* blue /
color: oklch(100% 0 0); / white /
color: oklch(0% 0 0 / 50%); / black with 50% opacity */
} (View Highlight)review
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)review
OKLCH has an another interesting feature: device independence; OKLCH wasn’t just created for current monitors with sRGB colors. (View Highlight)review
If you don’t have a build tool, we recommend using Vite or compiling your CSS with the lightningcss CLI. (View Highlight)review