OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog
evilmartians.com · 4,912 words · saved by 2 readers
CSS Color Module 4 adds oklch(), and we gain P3 wide-gamut support, boost code readability, and improve developer-designer communication.
The new CSS Color 4 specification has added the new oklch() notation for declaring colors. In this post, we explain why this is important for design systems and color palettes. 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-1). “Perceived” means that it has consistent lightness for our eyes, 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 { color: oklch(0.45 0.26 264); /* blue…
saved by
related reading
- oklch.fyi ▸ OKLCH Color Picker, Generator and Converteroklch.fyi
- Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS — Smashing Magazinesmashingmagazine.com
- How to generate color palettes for design systems || Matt Ström-Awn, designer-leadermatthewstrom.com
- RandomA11y - Accessible Color Combinationsrandoma11y.com
- Color: From Hexcodes to Eyeballsjamie-wong.com
- <color> CSS type - CSS | MDNdeveloper.mozilla.org
- Tailwind CSS Colors - All colors + Custom color generatoruicolors.app
- Easing Gradientslarsenwork.com
- Color Spaces – Bartosz Ciechanowskiciechanow.ski
- uchū — the color palette for internet loversuchu.style
- How we redesigned the Linear UI (part Ⅱ) - Linearlinear.app
- The HSB Color System: A Practitioner's Primer – Learn UI Designlearnui.design