MUI theme palette

Client

Build palette objects for Material UI createTheme: primary ramp from one brand color (same sRGB 50–950 family as our Tailwind-style tool), optional secondary, plus background, text, and divider tuned for light and dark surfaces. Copy TypeScript; nothing leaves your tab.

MUI theme snippet

?
Pick a primary brand color (same ramp as our Tailwind-style helper: 50–950 in sRGB). Optionally add a secondary—otherwise we keep a classic purple secondary pair. Copy createTheme code for light and dark palette settings; all processing stays in your browser.
Preview
Preview

Paper surface

Secondary text uses the generated muted foreground tone.

TypeScript (createTheme)
import { createTheme } from '@mui/material/styles';

export const lightTheme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#0D9488',
      light: '#66BBB4',
      dark: '#085E56',
      contrastText: '#FAFAFA',
    },
    secondary: {
      main: '#9C27B0',
      light: '#BA68C8',
      dark: '#7B1FA2',
      contrastText: '#FFFFFF',
    },
    background: {
      default: '#ECF6F5',
      paper: '#FFFFFF',
    },
    text: {
      primary: '#091718',
      secondary: '#65757C',
    },
    divider: '#93CFCA',
  },
});

export const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#3AA89E',
      light: '#93CFCA',
      dark: '#0B796F',
      contrastText: '#FAFAFA',
    },
    secondary: {
      main: '#9C27B0',
      light: '#BA68C8',
      dark: '#7B1FA2',
      contrastText: '#FFFFFF',
    },
    background: {
      default: '#0A2D2C',
      paper: '#163837',
    },
    text: {
      primary: '#E9F3F2',
      secondary: '#8C9FA5',
    },
    divider: '#213F3F',
  },
});

Common use cases

  • Paste a brand HEX from design, copy `lightTheme` and `darkTheme` into your MUI app and wire `ThemeProvider` + `CssBaseline`.
  • Add a secondary accent (or leave it empty) to keep the classic purple pair—swap later in code if product changes.
  • After generating colors, open the WCAG contrast checker on primary.main vs background if you need formal pass/fail.

Common mistakes to avoid

  • Expecting pixel-perfect match to MUI default blue

    We derive primary.main from your color’s 500-step on an sRGB ramp; light/dark/contrastText follow that ramp, not the stock Material Design blue.

  • Forgetting to switch ThemeProvider when the app toggles dark mode

    The snippet exports two themes—you still choose which one wraps your tree (or use a single dynamic theme in your own code).

FAQ

Is this an official MUI product?

No. It is a standalone helper that outputs common createTheme palette fields so you can paste into a project that uses Material UI.

Are my colors uploaded?

No. Parsing runs only in your browser.

Can agents prefill primary and secondary via URL?

Yes—use the same primary color query keys as other color tools (`color`/`colorb` or `q`/`qb`). Optional secondary: `secondary`/`secondaryb`.

Common search terms

Phrases people search for that match this tool. See the full long-tail keyword index.

  • mui createtheme palette generator
  • material ui light dark theme colors
  • mui primary secondary palette from hex

More tools

Related utilities you can open in another tab—mostly client-side.