Material Design Colors

Material design is a visual language and design system developed by Google with an almost flat style and bright colors.

View UI colors
Red
Pink
Purple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep Orange
Brown
Grey
Blue Grey

Red

50
96
100
89
200
77
300
69
400
65
500
64
600
61
700
57
800
54
900
50
A100
76
A200
68
A400
64
A700
55

Pink

50
94
100
85
200
77
300
69
400
64
500
61
600
57
700
53
800
49
900
42
A100
76
A200
67
A400
62
A700
54

Purple

50
94
100
84
200
74
300
65
400
58
500
52
600
49
700
45
800
42
900
36
A100
76
A200
68
A400
64
A700
58

Deep Purple

50
94
100
84
200
74
300
63
400
55
500
47
600
45
700
42
800
40
900
35
A100
72
A200
58
A400
51
A700
48

Indigo

50
94
100
85
200
74
300
64
400
56
500
48
600
45
700
42
800
38
900
32
A100
73
A200
60
A400
56
A700
53

Blue

50
95
100
89
200
82
300
75
400
70
500
66
600
62
700
56
800
51
900
42
A100
76
A200
65
A400
61
A700
56

Light Blue

50
96
100
90
200
83
300
77
400
73
500
70
600
66
700
60
800
55
900
45
A100
84
A200
78
A400
72
A700
64

Cyan

50
96
100
90
200
85
300
79
400
76
500
73
600
68
700
62
800
56
900
44
A100
93
A200
91
A400
84
A700
72

Teal

50
95
100
87
200
79
300
71
400
66
500
61
600
57
700
52
800
47
900
38
A100
94
A200
91
A400
83
A700
72

Green

50
96
100
90
200
83
300
77
400
72
500
67
600
63
700
57
800
52
900
43
A100
92
A200
86
A400
81
A700
73

Light Green

50
97
100
92
200
87
300
83
400
79
500
75
600
71
700
64
800
58
900
47
A100
94
A200
92
A400
89
A700
80

Lime

50
98
100
95
200
92
300
90
400
87
500
86
600
81
700
74
800
68
900
56
A100
97
A200
96
A400
93
A700
86

Yellow

50
99
100
97
200
96
300
95
400
94
500
93
600
89
700
84
800
79
900
72
A100
98
A200
97
A400
93
A700
89

Amber

50
98
100
95
200
91
300
89
400
86
500
84
600
82
700
78
800
76
900
71
A100
92
A200
89
A400
85
A700
80

Orange

50
97
100
92
200
87
300
83
400
80
500
77
600
75
700
71
800
68
900
63
A100
88
A200
81
A400
76
A700
71

Deep Orange

50
95
100
89
200
82
300
76
400
71
500
68
600
66
700
62
800
59
900
54
A100
79
A200
71
A400
65
A700
58

Brown

50
94
100
85
200
75
300
65
400
57
500
49
600
45
700
40
800
35
900
30

Grey

50
99
100
97
200
95
300
91
400
80
500
70
600
56
700
49
800
38
900
25

Blue Grey

50
95
100
88
200
79
300
71
400
64
500
57
600
52
700
45
800
39
900
31

What Material Design is and how its palette is organized

Material Design is the design system Google introduced in 2014 to unify the look of its products and Android, combining flat surfaces with subtle depth cues (shadow, motion) that mimic paper and ink.

The Material Design palette organizes each color into shades numbered from 50 to 900, lightest to darkest, like other scales. The difference is the accent colors: A100, A200, A400 and A700, more saturated, vivid variants made specifically for buttons, links and interactive elements that need to stand out from the rest of the interface.

How to use the table

Switch between Hex, RGB, HSL and OKLCH depending on what you need to copy, and click any shade to copy its code instantly.

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.

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.

Yes. The table lets you switch between Hex, RGB, HSL and OKLCH, and copy any of them with one click.