OKLCH support

[MrHBS]

Is there plans to move over to OKLCH instead of the weird HCT color space?

cc @pennzht

[WillsterJohnson]

HCT was specifically developed for superior perceptual accuracy (material design blog).

I also found a comparison between HCT, OKLCH, and sRGB color spaces which is a good visual demonstration of how HCT is at worst on-par with OKLCH, and is typically better. Note that while the rendered CSS uses RGB notation, the color math used to arrive at these values is done within the different color spaces.

I'm not affiliated with Google or the Material Foundation, but I'm very confident in assuming that this project will stick to HCT and will not drop down to OKLCH.

[FluorescentHallucinogen]

which is a good visual demonstration of how HCT is at worst on-par with OKLCH, and is typically better

I've played around with the https://hct-test.pages.dev demo and, unfortunately, I didn't see any cases where HCT is better than OKLCH.

Could you please share screenshots of such cases?

The most important advantage of OKLCH over HCT is that OKLCH is supported by browsers natively.

Also, OKLCH compared to HCT doesn't require complicated math.

This means that OKLCH doesn't require complex libraries like the material-color-utilities. You can even do without JS at all, using pure CSS!

@media (prefers-color-scheme: light) {
  color: blue;
}

@media (prefers-color-scheme: dark) {
  color: oklch(from blue calc(l + 25) c h);
}

See some experiments by @rodydavis: https://codepen.io/collection/MgQRKw. :wink:

Moreover, OKLCH color model supports not only sRGB color space, but also wide-gamut color spaces (P3, Rec2020 and beyond). See https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl.

:root {
  --accent: oklch(70% 0.2 145);
}
+ @media (color-gamut: p3) {
+   :root {
+     --accent: oklch(70% 0.29 145);
+   }
+ }

You can play around with https://oklch.com to construct colors that can't be displayed on displays that doesn't support P3/Rec2020 or on any existing device.

Not sure if HCT supports wide gamut (colors beyond sRGB) or not.

[FluorescentHallucinogen]

I've opened #131.

[FluorescentHallucinogen]

Adding @jpohhhh, who works on color at Google, to this discussion.

[TriMontana]

For those of us who've invested a significant amount of time learning and integrating HCT, I hope we stay the course unless the results are significantly worse via data and testing.

[facelessuser]

As someone who has experimented with HCT and OkLCh in this area recently. HCT specifically uses CIE Lab lightness to give a better perceptual lightness difference. OkLCh does poorly in this area if you want to create tonal palettes.

In HCT's defense, it can support wider gamuts, it is simply that the current toolset does not. This is likely to provide consistent colors across different displays of varying gamuts. I imagine this is a purposeful choice. If you implement HCT as a proper unbounded color space, you can generate tonal palettes in Display P3, sRGB, etc. Below is Display P3 (top) vs sRGB (bottom) using color(display-p3 0 1 0) and color(srgb 0 1 0) respectively to seed the palette.

Unfortunately, HCT is a very complicated model to calculate to and from. It makes it hard for people to just pick it up unless they are using this specific toolset because I don't know of many places outside this toolset where HCT is implemented. HCT also doesn't hold blues as constant as OkLCh and can have a purplish shift in its tonal palettes.

With that said, you can get visually closer results to HCT if you toe OkLCh lightness to make it align more with CIE Lab's lightness response. This requires far, far less complicated calculations.

Now, my goal here isn't to say people should use OkLCh over HCT, or the reverse. I've done absolutely no contrast tests to prove one approach is as good or superior to the other. This is mainly just some interesting tests for those who've thought: "why not use OkLCh?". My only statement is that you can get visually "similar" (not "same") results with OkLCh if mapping your tone levels to the more appropriate OkLCh lightness.

HCT (top) vs OkLCh (bottom)

For anyone interested, this shows the comparison of HCT to OkLCh tonal palettes in a little more depth and how I arrived at these results:

https://facelessuser.github.io/coloraide/playground/?notebook=https%3A%2F%2Fgist.githubusercontent.com%2Ffacelessuser%2F0235cb0fecc35c4e06a8195d5e18947b%2Fraw%2F3ca56c388735535de080f1974bfa810f4934adcd%2Fexploring-tonal-palettes.md