Day 98: oklab() and oklch()
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
oklch() are okay versions of
lch() are not okay.
I will not pretend that I really understand this whole color on the web thing, how it works or why one color function offers many more options to developers than the other, but I did learn several things during this experiment. I understand why a color function like
hsl() offers better DX than
rgb(). I’ve learned that rgb(), hsl(), and hwb() use colors from the sRGB color space, and lab() and lch() colors from the CIELAB color space. These color functions are relevant now because they support more colors and modern monitors can display them. It kinda also makes sense to me why some people say that using lch() is more intuitive than lab().
This doesn’t sound too bad, but as soon as I dig deeper into colors, I soon reach a point where I’m out. It’s usually a graph or complicated formula that stops my enthusiasm. Why am I saying this? I don’t know, maybe self-defense, maybe to make you feel better and assure you it’s fine to not understand everything.
Anyway, now I’ve added
lch() to my tool belt, and along comes
oklch(). lab and lch are great, but not perfect. The main issue with lab and lch is that there's a bug with blue colors which turns blue purple.
oklch() fix that.
The okay versions of lab and lch come with additional improvements. You can learn more about it Chris Lilley's presentation “Better than Lab? Gamut reduction CIE Lab & OKLab”.
See on CodePen
Do you want to learn even more awesome CSS?
I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.
Learn more about the workshop!
Overview: 100 Days Of More Or Less Modern CSS