Color - Style - Google design guidelines

Google ©

Color

Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.

Color palette

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.

The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.

Download color swatches

0.02 MB (.zip)

Red 500 #f44336
50#ffebee
100#ffcdd2
200#ef9a9a
300#e57373
400#ef5350
500#f44336
600#e53935
700#d32f2f
800#c62828
900#b71c1c
A100#ff8a80
A200#ff5252
A400#ff1744
A700#d50000

Pink 500 #e91e63
50#fce4ec
100#f8bbd0
200#f48fb1
300#f06292
400#ec407a
500#e91e63
600#d81b60
700#c2185b
800#ad1457
900#880e4f
A100#ff80ab
A200#ff4081
A400#f50057
A700#c51162

Purple 500 #9c27b0
50#f3e5f5
100#e1bee7
200#ce93d8
300#ba68c8
400#ab47bc
500#9c27b0
600#8e24aa
700#7b1fa2
800#6a1b9a
900#4a148c
A100#ea80fc
A200#e040fb
A400#d500f9
A700#aa00ff

Deep Purple 500 #673ab7
50#ede7f6
100#d1c4e9
200#b39ddb
300#9575cd
400#7e57c2
500#673ab7
600#5e35b1
700#512da8
800#4527a0
900#311b92
A100#b388ff
A200#7c4dff
A400#651fff
A700#6200ea

Indigo 500 #3f51b5
50#e8eaf6
100#c5cae9
200#9fa8da
300#7986cb
400#5c6bc0
500#3f51b5
600#3949ab
700#303f9f
800#283593
900#1a237e
A100#8c9eff
A200#536dfe
A400#3d5afe
A700#304ffe

Blue 500 #2196f3
50#e3f2fd
100#bbdefb
200#90caf9
300#64b5f6
400#42a5f5
500#2196f3
600#1e88e5
700#1976d2
800#1565c0
900#0d47a1
A100#82b1ff
A200#448aff
A400#2979ff
A700#2962ff

Light Blue 500 #03a9f4
50#e1f5fe
100#b3e5fc
200#81d4fa
300#4fc3f7
400#29b6f6
500#03a9f4
600#039be5
700#0288d1
800#0277bd
900#01579b
A100#80d8ff
A200#40c4ff
A400#00b0ff
A700#0091ea

Cyan 500 #00bcd4
50#e0f7fa
100#b2ebf2
200#80deea
300#4dd0e1
400#26c6da
500#00bcd4
600#00acc1
700#0097a7
800#00838f
900#006064
A100#84ffff
A200#18ffff
A400#00e5ff
A700#00b8d4

Teal 500 #009688
50#e0f2f1
100#b2dfdb
200#80cbc4
300#4db6ac
400#26a69a
500#009688
600#00897b
700#00796b
800#00695c
900#004d40
A100#a7ffeb
A200#64ffda
A400#1de9b6
A700#00bfa5

Green 500 #4caf50
50#e8f5e9
100#c8e6c9
200#a5d6a7
300#81c784
400#66bb6a
500#4caf50
600#43a047
700#388e3c
800#2e7d32
900#1b5e20
A100#b9f6ca
A200#69f0ae
A400#00e676
A700#00c853

Light Green 500 #8bc34a
50#f1f8e9
100#dcedc8
200#c5e1a5
300#aed581
400#9ccc65
500#8bc34a
600#7cb342
700#689f38
800#558b2f
900#33691e
A100#ccff90
A200#b2ff59
A400#76ff03
A700#64dd17

Lime 500 #cddc39
50#f9fbe7
100#f0f4c3
200#e6ee9c
300#dce775
400#d4e157
500#cddc39
600#c0ca33
700#afb42b
800#9e9d24
900#827717
A100#f4ff81
A200#eeff41
A400#c6ff00
A700#aeea00

Yellow 500 #ffeb3b
50#fffde7
100#fff9c4
200#fff59d
300#fff176
400#ffee58
500#ffeb3b
600#fdd835
700#fbc02d
800#f9a825
900#f57f17
A100#ffff8d
A200#ffff00
A400#ffea00
A700#ffd600

Amber 500 #ffc107
50#fff8e1
100#ffecb3
200#ffe082
300#ffd54f
400#ffca28
500#ffc107
600#ffb300
700#ffa000
800#ff8f00
900#ff6f00
A100#ffe57f
A200#ffd740
A400#ffc400
A700#ffab00

Orange 500 #ff9800
50#fff3e0
100#ffe0b2
200#ffcc80
300#ffb74d
400#ffa726
500#ff9800
600#fb8c00
700#f57c00
800#ef6c00
900#e65100
A100#ffd180
A200#ffab40
A400#ff9100
A700#ff6d00

Deep Orange 500 #ff5722
50#fbe9e7
100#ffccbc
200#ffab91
300#ff8a65
400#ff7043
500#ff5722
600#f4511e
700#e64a19
800#d84315
900#bf360c
A100#ff9e80
A200#ff6e40
A400#ff3d00
A700#dd2c00

Brown 500 #795548
50#efebe9
100#d7ccc8
200#bcaaa4
300#a1887f
400#8d6e63
500#795548
600#6d4c41
700#5d4037
800#4e342e
900#3e2723

Grey 500 #9e9e9e
50#fafafa
100#f5f5f5
200#eeeeee
300#e0e0e0
400#bdbdbd
500#9e9e9e
600#757575
700#616161
800#424242
900#212121

Blue Grey 500 #607d8b
50#eceff1
100#cfd8dc
200#b0bec5
300#90a4ae
400#78909c
500#607d8b
600#546e7a
700#455a64
800#37474f
900#263238

Black#000000
White#ffffff

UI color application

Choose your palette

Limit your selection of colors by choosing three hues from the primary palette and one accent color from the secondary palette.

Customize the color palette

Define your app’s color palette.

Use opacity for text, icons, and dividers

You can change the opacity of text to convey how important certain information is relative to other text.

Dark text on light backgrounds

For dark text on a light background, the most important text has an opacity of 87%. Secondary text, which is lower in the visual hierarchy, has an opacity of 54%. Text hints, like those in text fields and labels, and disabled text have even lower visual prominence with an opacity of 26%.

Dark text (#000000)	Opacity
Primary text	87%
Secondary text	54%
Hint and disabled text and icons	38%

White text on dark backgrounds

The chart values relay relative levels of importance for white text on dark backgrounds.

Hint and disabled content

Hint and disabled text and icons have an opacity of 26% for dark text on light backgrounds, and an opacity of 30% for white text on dark backgrounds.

Text on colored backgrounds

For white or black text on colored backgrounds, see these tables of color palettes for the appropriate contrast ratios and hex values.

Other elements

Other elements, such as icons and dividers, benefit from having a hex value of black or white so that they work on backgrounds of any color.

Light text (#FFFFFF)	Opacity
Primary text	100%
Secondary text	70%
Hint and disabled text and icons	30%

Toolbars and status bars

Toolbars and larger color blocks should use the 500 color of the primary color of your app. The status bar should be the darker 700 tint of your primary color.

Bold use of color in large fields is encouraged. Different elements in the UI can take on different parts of your color theme.

The toolbar uses the 500 version of indigo, while the status bar uses the 700 version.

When editing a folder name, the entire title and description area uses indigo as the background color.

Accent color

Use the accent color for your primary action button and components like switches or sliders.

Do.
Only use the accent color for body text to accent a web link.

Don't.
Don’t use the accent color for body text color.

Do.
Use the accent color for your primary action button and components like switches or sliders.

Don't.
Don’t use the accent color for app bars or larger areas of color. Avoid using the same color for the floating action button and the background.

Fallback accent colors

If your accent color is too light or dark to sufficiently contrast with the background color, use a darker or lighter tint of the accent color instead. If your accent color doesn’t work at all, use the 500 version of your primary color on white backgrounds. If your background color is the 500 version of your primary color, make your accent color either white 100% or black 54%.

Do.
Use a fallback accent color over background colors that are too light or too dark.

Don't.
Don’t use the accent color over a background color if there isn’t enough contrast.

Themes

Themes let you apply a consistent tone to an app. The theme specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements. To promote greater consistency between apps, light and dark themes are available to choose from.

Download themes

1.23 MB (.ai)