Add CIE LCH, Oklab and Oklch formats to Color Picker

[charlesroper]

Description of the new feature / enhancement

CIE LCH, Oklab and Oklch colours are coming to CSS Color Module 4. See here.

For a summary and in-depth explanation of the benefits see OKLCH in CSS: why we moved from RGB and HSL.

There is an online colour picker for Oklch here: https://oklch.com/

Scenario when this would be used?

As an emerging and important new standard, these colour definitions needs tools to help designers adopt them. Currently no colour pickers provide these formats, as far as I know.

Miriam Suzanne, core contributor to Sass and Invited Expert on the W3C CSS Working Group in When Our Tools Hold Us Back writes:

I don’t know of any popular design tools that provide LCH, or the newer okLAB/okLCH variants, let alone relative colors defined as a function of mixing or adjusting other underlying colors.

And when it comes to copying our colors out of a design tool, the options are generally 6-digit HEX, or copying individual channel values, one at a time. Either way, converting our colors into a more human-friendly syntax would often be an extra step, and may not be worth the effort.

Since all legacy colors on the web rely on a single color model (RGB) and gamut (sRGB), there has been little meaningful difference between formats (until now). Once we used a graphic interface to pick the color we want, it maybe didn’t matter what format we copy-pasted into a variable somewhere.

But what’s the designer path towards using new, extended color spaces in CSS? Can they ever gain traction on the web without first finding support in our design tools? I’m not sure.

And Chris Coyier in Hex Colors Aren’t Great At Anything Except Being Popular:

Perhaps it’s best to think of this as an opportunity: someone (please) make a kick-ass color app that supports all the newest color formats, relative colors, color mixing, and all that, and have the app help out with their usage in CSS (copy and paste with quality fallbacks, etc).

Supporting information

• OK, OKLCH 👑 - Chris Coyier
• LCH colors in CSS: what, why, and how?
• OK LCH, I’m Convinced
• LCH is the best color space!

Adam Argyle has said lab, lch, oklab, oklch, etc are going to land in Chrome 110.

[dcog989]

OKLCH now supported by all modern browsers - https://caniuse.com/?search=oklch()

[lemonyte]

I'd like to work on a PR for this issue.

Also, for reference: Original Oklab post by Björn Ottosson