Material UI (MUI) uses a theme object created with createTheme() to define the color system for your entire React application. The palette property within this theme controls primary, secondary, error, warning, info, success colors plus background and surface tones. PaletteRx generates the exact structure this function expects.
How MUI's Palette Works
MUI's palette defines primary.main, secondary.main, and various semantic colors. From each main color, MUI automatically generates light, dark, and contrastText variants using its internal color manipulation functions. This means getting the main values right is critical — the derived variants depend on them.
Exporting from PaletteRx
Select Material UI from the CSS & JS Frameworks section in PaletteRx's export step. The output generates a createTheme() call with your palette colors mapped to MUI's expected structure. Primary maps to palette.primary.main, Secondary to palette.secondary.main, and base colors map to background.default and background.paper.
Integration
Copy the generated theme object into your app's theme configuration file. Wrap your application in a ThemeProvider component with this theme, and every MUI component will use your PaletteRx palette.
MUI's generated light and dark variants work best when the base colors have moderate lightness (40-60% in HSL). PaletteRx's balance checking helps ensure your colors fall in this optimal range.
Dark Mode Support
MUI supports dark mode through the palette.mode property. Build separate light and dark palettes in PaletteRx, export both as Material UI themes, and switch between them based on user preference.
contrastText auto-calculation uses the WCAG luminance formula. Since PaletteRx already validates contrast ratios, your MUI components will have accessible text colors by default.