Add OKLab and OKLCH support

[ai]

Lab/LCH is better than HSL, but also have one problem. When you change C or H component for blue color it could change hue to violet.

This issue was fixed in OKLab and OKLCH.

• Announce post
• “Better than Lab? Gamut reduction CIE Lab & OKLab” talk about OKLab in CSSWG.

I think we should add it to colord because it could be winner in upcoming color revolution in CSS.

It is not just a “random color space”:

• oklab() and oklch is part of CSS Colors 4
• Safari TP has oklab() and oklch() support for CSS.
• PostCSS Preset Env polyfills oklab() and oklch()

[omgovich]

Hi Andrey! Totally agree and already planning to work on that.

I always follow CSS Color Level specs and since OKLab and OKLCH are now part of it, I'm definitely going to implement a plugin for these color spaces after my vacation ⛷

[omgovich]

cc @EricRovell Hi! You probably might be interested in joining this initiative.

[ai]

@romainmenke’s code in postcss-oklab-function can be useful https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function

[EricRovell]

@omgovich Would be glad to work on this issue.. What's the plan? Should I start working on oklab?

[omgovich]

@EricRovell That is awesome! Take as much time as you need)

[dkryaklin]

Hello there. I am working on this issue and already have something to share. But before I push anything I need some help here:

Let's say we added both lab & oklab plugins at the time. What behavior should we expect for the parse function? The problem is that they both have the same format, so not sure how to determine one from the other.

[ai]

In CSS they have different function name lab()/lch() vs oklab()/oklch().

How did colord parse works and what is the problem?

[dkryaklin]

Parser for LAB color is very basic and allows to pass only Object in the next format e.g. { l: 15.05, a: 6.68, b: 14.59, alpha: 0.5 }

Here part of the implementation:

export const parseLaba = ({ l, a, b, alpha = 1 }: InputObject): RgbaColor | null => {
  if (!isPresent(l) || !isPresent(a) || !isPresent(b)) return null;

For OKLAB parser I've created a similar basic parser that receives the same Object. The problem here is that there is no way to find out which color format it is if we are using both plugins simultaneously

Simplest solution here indicate which format we want to parse e.g. { l: 15.05, a: 6.68, b: 14.59, alpha: 0.5, format: 'lab' | 'oklab' }

[ai]

Or we can add ok: true marker

[dkryaklin]

Please have a look https://github.com/omgovich/colord/pull/92/files @omgovich @ai 🙏

[omgovich]

Hey guys! I apologize for the huge delay! Since I lived near the Ukrainian border and I'm against this terrible war, I had to leave Russia. Spent a few months trying to relocate and settle in another country, so I wasn't able to work on open-source.

Will do my best to make this feature merged.

[dkryaklin]

@omgovich of course! Take care! Also, just want to link this issue here https://github.com/stylelint/stylelint/issues/5905

[205g0]

@omgovich hope all is good, wanted just to ask if there's any chance to have OKLCH, which seems to be to most sane human-usable format, to be implemented? 🙂