Material Design Color Chart

Material design is a visual language and design system developed by Google with an almost flat style and vibrant color schemes.

Red

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Pink

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Purple

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Deep Purple

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Indigo

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Blue

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Light Blue

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Cyan

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Teal

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Green

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Light Green

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Lime

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Yellow

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Amber

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Orange

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Deep Orange

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Brown

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Grey

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Blue Grey

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Neutral

Swatch	Name	Hex
	White
	Black

Copy as Tailwind config

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        'primary': '#000000',
        'secondary': '#616161',
        'accent': '#EF9A9A',
        'surface': '#FFFDE7',
        'highlight': '#FFFFFF',
      }
    }
  }
}

Material color roles

Material Design assigns colors semantic roles: primary for key components, accent for highlights, and neutrals for surfaces and typography. Each hue provides lighter and darker companions for state layers and elevation.

The chart captures the classic Material palette hex values used across Android, web implementations, and design kits.

Using Material colors on the web

Map primary and accent hex values to CSS custom properties (`--md-sys-color-primary`) when building design-token-driven layouts.

Validate text on colored surfaces with the contrast checker—Material's vivid primaries often need dedicated on-color tokens for readable body copy.