Day 98: oklab() and oklch()

oklab() and oklch() are okay versions of lab() and lch() because lab() and 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 …


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

oklab() and oklch() are okay versions of lab() and lch() because lab() and 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 hsl(), hwb(), lab(), and lch() to my tool belt, and along comes mary oklab() and 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.

3 shades of blue compared in lch and oklch. oklch colors look blue while lch colors turn purple.

oklab() and oklch() fix that.

Two triangles that are constant-hue slice of LCH and OKLCH spaces with the same hue. The LCH slice, the leftmost triangular shape, is blue on one side and purple on the other. The right shape, OKLCH, keeps a constant hue, as expected.
Source: evilmartians.com

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”.

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2023-02-08T00:00:00+00:00) Day 98: oklab() and oklch(). Retrieved from https://www.scien.cx/2023/02/08/day-98-oklab-and-oklch-2/

MLA
" » Day 98: oklab() and oklch()." Manuel Matuzović | Sciencx - Wednesday February 8, 2023, https://www.scien.cx/2023/02/08/day-98-oklab-and-oklch-2/
HARVARD
Manuel Matuzović | Sciencx Wednesday February 8, 2023 » Day 98: oklab() and oklch()., viewed ,<https://www.scien.cx/2023/02/08/day-98-oklab-and-oklch-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 98: oklab() and oklch(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/08/day-98-oklab-and-oklch-2/
CHICAGO
" » Day 98: oklab() and oklch()." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/02/08/day-98-oklab-and-oklch-2/
IEEE
" » Day 98: oklab() and oklch()." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/02/08/day-98-oklab-and-oklch-2/. [Accessed: ]
rf:citation
» Day 98: oklab() and oklch() | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/02/08/day-98-oklab-and-oklch-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.