[colorManipulator] Support the `oklch` color notation

[danilo-leal]

I was experimenting with converting the branding theme palette from HEX codes to the oklch() notation, but the current version of the MUI System doesn't support it, even though it does already support color(display-p3...).

I'm also a bit unsure whether this is System or Pigment CSS scope, so I'll leave that open for now.

Ultimately, this seems like the best color notation to use at the moment¹, providing the same great readability that HSL has, but supporting the p3 and other color spaces. I'm super interested in converting the website & documentation to use it (and, of course, Material UI v7 should potentially use it as well). I think in the meantime I'll use color(display-3).

Search keywords: oklch, color notation, p3, wide-gamut

Footnotes

1. https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl ↩

[brijeshb42]

It mainly lies in system. When fixed there, it'll automatically get fixed in Pigment.

[wouter-leistra]

Is there already any news on when this will be added. I started hopeful today that this issue was resolved and setup my css :root design tokens using oklch and now i see the same error.

[CzechCoder]

Can't believe this was posted a year ago and still wasn't addressed. If you use MUI with Tailwind, which isn't uncommon these days, this should be fixed.

[siriwatknp]

@danilo-leal @CzechCoder Check this out! https://deploy-preview-43942--material-ui.netlify.app/material-ui/customization/css-theme-variables/native-color-syntax/#modern-color-spaces

It's currently a WIP PR: #43942, you can participate by giving it a like to pushing to the finishing line.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.