RCS

This demo demonstrates the ability to use different color spaces in Material-UI. When experimental flag is enabled, Material UI will generate light, dark, and constrastText using pure CSS functions (color-mix and relative color syntax).

extendTheme({
  cssVariables: {
    experimental_relativeColor: true,
  },
  colorSchemes: {
    light: {
      palette: { primary: { main: 'oklch(80% 0.30 50)' } },
    },
  },
})

--mui-palette-primary-main: oklch(80% 0.30 50);
--mui-palette-primary-light:
  color-mix(in oklch, oklch(80% 0.30 50), #fff 20%);
--mui-palette-primary-dark:
  color-mix(in oklch, oklch(80% 0.30 50), #000 30%);
--mui-palette-primary-contrastText:
  oklch(from var(--mui-palette-primary-main) var(--__l) 0 h / var(--__a));