Skip to content

Material Design colors: full palette with accents

Google’s classic Material Design palette: 19 colors with shades 50 to 900 and accents A100 to A700. Copy each color in HEX, RGB, HSL, OKLCH or with its MUI name.

View UI colors
Copy as

Values of each color

Pick a color to see all its tones with the MUI name, HEX, RGB, OKLCH and the text color that contrasts best.

Blue

ToneMUIHEXRGBOKLCHText
50Aa18.4:1
100Aa15.0:1
200Aa12.0:1
300Aa9.5:1
400Aa7.9:1
500Aa6.7:1
600Aa5.7:1
700Aa4.6:1
800Aa5.7:1
900Aa8.6:1
A100Aa9.7:1
A200Aa6.3:1
A400Aa5.3:1
A700Aa4.9:1

What Material Design is and how its palette is organized

Material Design is the design system Google introduced in 2014 to unify its products and Android. Its palette has 19 colors, each with ten shades numbered from 50 (the lightest) to 900 (the darkest).

What sets it apart are the accents: A100, A200, A400 and A700, more saturated versions of each color meant for buttons, switches and other elements that must stand out. Brown, Grey and Blue Grey have no accents.

How to combine a primary color and an accent

The original Material guidelines suggest picking a primary color and using its 500 shade on the most visible surfaces, such as the top app bar, and 700 for the status bar. Light shades (50–200) work for backgrounds and secondary elements.

For the accent you pick another family and one of its A tones, usually A200, so the main action button stands out. The classic combination is Indigo with a Pink accent.

Material Design 2 and Material 3: two color systems

This table covers the classic Material Design palette (versions 1 and 2). Material 3, also known as Material You, uses a different system.

Material Design 2 (this palette)

  • 19 fixed colors with shades 50–900 and accents A100–A700.
  • Values never change, which is why they can be copied from a table.
  • It is the palette shipped by MUI (@mui/material/colors) and many templates.

Material 3 (Material You)

  • Palettes are generated from a seed color, with 13 tones from 0 (black) to 100 (white).
  • On Android 12 and later, the seed color can come from the wallpaper (dynamic color).
  • The theme is organized in roles: primary, secondary, tertiary, neutral and neutral variant.

How to use Material colors in your project

If you work with MUI (React), the colors are included and imported by family. In any other project, copy the HEX from the table and store it as a CSS variable.

MUI (React)

import { createTheme } from '@mui/material/styles';
import { indigo, pink } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: pink.A200 },
  },
});

CSS

:root {
  /* indigo 500, indigo 700 and pink A200 */
  --primary: #3F51B5;
  --primary-dark: #303F9F;
  --accent: #FF4081;
}

Frequently asked questions

They are more saturated variants of each color, meant for elements that need to stand out, such as buttons, links or active icons, unlike the primary shades (50 to 900), which are meant for backgrounds and surfaces.

The original guidelines suggest the 500 shade for main surfaces such as the top app bar, 700 for the status bar and an accent from another family (usually A200) for the main action button.

Both use a numbered light-to-dark scale, but Material Design adds accent shades (A100 to A700) that Tailwind does not have. The exact names and values of each color family also differ between the two systems.

This is the classic Material Design palette. Newer versions of the system (Material You) introduce dynamic palettes generated from a base color, but this scale is still widely used and works with projects that reference it directly.

MUI ships this same palette. Import the family from @mui/material/colors and use the tone as an index: indigo[500] or pink.A200. Choose “MUI” in “Copy as” to copy that name directly.

The official palette does not define them. They are neutral or muted colors meant for backgrounds, text and secondary elements, not for standing out. If you need an accent, pair them with another family.

Yes. In “Copy as” you can choose HEX, RGB, HSL, OKLCH or the MUI name, and each color’s table shows every format at once.