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
- Easing Gradientslarsenwork.com
- <color> CSS type - CSS | MDNdeveloper.mozilla.org
- RandomA11y - Accessible Color Combinationsrandoma11y.com
- will-change in CSSjakub.kr
- colors - CSS variable calculation of HSL values - Stack Overflowstackoverflow.com
- Colors - Core conceptstailwindcss.com
- How to generate color palettes for design systems || Matt Ström-Awn, designer-leadermatthewstrom.com
- Color Spaces – Bartosz Ciechanowskiciechanow.ski
- Visual design rules you can safely follow every timeanthonyhobday.com
- Understanding the CIE L*C*h Color Spacesensing.konicaminolta.us