2 ms·
OKLCH in CSS
- rikroots 4y agoThings I learned about OKLAB/OKLCH when adding it to my canvas library - Safari latest versions support the color spaces for both CSS and canvas; doesn't look like other browsers are working on this area at the moment[1]. Then again, only Safari supports LAB/LCH at this time. - Safari only supports a limited subset of possible ways of defining OKLCH in CSS color strings eg: oklch(45% 0.26 264), oklch(0% 0 0 / 50%). The (current) specification allows L, A, B and C values to be numbers, percent values, or 'none', while Hue can be any permitted <hue> value[2]. - Surprisingly, the latest version of the spec includes JS code for converting between color spaces which I (just about) understood - even for the parts about converting between sRGB and lRGB, and the horror show around xyz-D50 and xyz-D65. Whoever wrote the latest version of the spec: thank you! - And finally, on a personal note, the faster the frontend software industry can move to OKLAB/OKLCH the happier I will be. The system makes sense, and the gradients look really nice![3] [1] - https://caniuse.com/mdn-css_types_color_oklch https://caniuse.com/mdn-css_types_color_oklch [2] - https://www.w3.org/TR/css-color-4/#specifying-oklab-oklch https://www.w3.org/TR/css-color-4/#specifying-oklab-oklch [3] - I made a puzzle game to test my implementation and put it on CodePen here - https://codepen.io/kaliedarik/pen/YzvYadX https://codepen.io/kaliedarik/pen/YzvYadX