3 ms·
Things 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
by rikroots 4y ago
Things 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