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^1, 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
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 supportcolor(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^1, 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