Beruflich Dokumente
Kultur Dokumente
1 of 16
https://www.google.com/design/spec/style/color.html#
Color
Color palette
14/11/2015 18:16
2 of 16
https://www.google.com/design/spec/style/color.html#
This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors.
Theyve 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, We
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
A200
Pink
#F44336
#FF5252
500
#E91E63
300
#F06292
A200
#FF4081
300
#BA68C8
400
#AB47BC
A200
#E040FB
14/11/2015 18:16
3 of 16
https://www.google.com/design/spec/style/color.html#
Blue
A200
#7C4DFF
500
#2196F3
500
#2196F3
A200
#448AFF
14/11/2015 18:16
4 of 16
https://www.google.com/design/spec/style/color.html#
Teal
600
A700
#039BE5
500
#009688
500
#009688
600
#00897B
700
#00796B
#0091EA
14/11/2015 18:16
5 of 16
600
https://www.google.com/design/spec/style/color.html#
#43A047
700
#689F38
14/11/2015 18:16
6 of 16
https://www.google.com/design/spec/style/color.html#
800
#EF6C00
Deep Orange
500
#FF5722
300
500
#A1887F
#FF5722
14/11/2015 18:16
7 of 16
https://www.google.com/design/spec/style/color.html#
Blue Grey
500
#607D8B
400
#78909C
14/11/2015 18:16
8 of 16
https://www.google.com/design/spec/style/color.html#
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.
Example of a primary color
palette
Related
Customize
the color
palette
Define your
apps color
palette.
14/11/2015 18:16
9 of 16
https://www.google.com/design/spec/style/color.html#
Don't.
Do.
changes.
14/11/2015 18:16
10 of 16
https://www.google.com/design/spec/style/color.html#
Opacity
Primary text
87%
Secondary text
54%
38%
14/11/2015 18:16
11 of 16
https://www.google.com/design/spec/style/color.html#
Opacity
Primary text
100%
Secondary text
70%
30%
14/11/2015 18:16
12 of 16
https://www.google.com/design/spec/style/color.html#
Accent color
Use the accent color for your
primary action button and
components like switches or
sliders.
accent color
14/11/2015 18:16
13 of 16
https://www.google.com/design/spec/style/color.html#
Do.
Don't.
Do.
Don't.
sliders.
14/11/2015 18:16
14 of 16
https://www.google.com/design/spec/style/color.html#
Do.
Don'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)
14/11/2015 18:16
15 of 16
https://www.google.com/design/spec/style/color.html#
Light theme
1. Status bar
2. App bar
3. Background
4. Cards/Dialogs
UI application
14/11/2015 18:16
16 of 16
https://www.google.com/design/spec/style/color.html#
Dark theme
1. Status bar
2. App bar
3. Background
4. Cards/Dialogs
UI application
Related
14/11/2015 18:16