You are on page 1of 16

Color - Style - Google design guidelines

1 of 16


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

14/11/2015 18:16

Google design guidelines 2 of 16 https://www. They’ve been designed to work harmoniously with each other. Download color swatches 0.02 MB (. Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.html# This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors.Color .zip) Red 500 A200 Pink #F44336 #FF5252 500 #E91E63 300 #F06292 A200 #FF4081 300 #BA68C8 400 #AB47BC A200 #E040FB 14/11/2015 18:16 .com/design/spec/style/ The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android.Style . We and iOS. .Style .Google design guidelines 3 of 16 https://www.html# Blue A200 #7C4DFF 500 #2196F3 500 #2196F3 A200 #448AFF 14/11/2015 18:16 .

Google design guidelines 4 of 16 https://www.html# Teal 600 A700 #039BE5 500 #009688 500 #009688 600 #00897B 700 #00796B #0091EA 14/11/2015 18:16 .com/design/spec/style/ .Color .

html# #43A047 700 #689F38 14/11/2015 18:16 .Color .Google design guidelines 5 of 16 600 .google.

Google design guidelines 6 of 16 .html# 800 #EF6C00 Deep Orange 500 #FF5722 300 500 #A1887F #FF5722 14/11/2015 18:16 .Style .com/design/spec/style/color.

com/design/spec/style/ Blue Grey 500 #607D8B 400 #78909C 14/11/2015 18:16 .Color .Style .Google design guidelines 7 of 16 https://www.

Example of a primary color Example of a secondary palette palette Related Customize the color palette Define your app’s color 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 design guidelines 8 of 16 https://www. 14/11/2015 18:16 .Style .Color .

google. Dark text on light backgrounds White text on dark backgrounds remains legible and vibrant Don't. Transparent black or white text behaves more flexibly than grey text because it 14/11/2015 18:16 .Style . design guidelines 9 of 16 https://www.Color . on a white background becomes ensures a minimum degree of hard to read if the background legibility and color harmony with color changes to magenta. and dividers You can change the opacity of text to convey how important certain information is relative to other text.54 opacity. set to a 0. changes.html# Use opacity for text. against background color Grey text (hex value of #727272) Black text. Do. new background colors.

like those in text fields and labels. the most important text has an opacity of 87%.Style . and disabled text have even lower visual prominence with an opacity of 38%. Secondary text. which is lower in the visual hierarchy.Color . disabled text and icons 38% Text hints. has an opacity of 54%.html# Dark text on light backgrounds Dark text (#000000) Opacity For dark text on light Primary text 87% Secondary text 54% Hint text. 14/11/2015 18:16 .Google design guidelines 10 of 16 https://www.

and an opacity of 30% for white content on dark backgrounds. Text on colored backgrounds For white or black text on colored backgrounds.Style . see these tables of color palettes for the appropriate contrast ratios and hex values. disabled text and icons 30% relative levels of importance for white text on dark backgrounds. Hint and disabled content Hint and disabled text and icons have an opacity of 38% for dark content on light backgrounds. Other elements Elements like icons and dividers benefit from having a hex value of black or white so that they work on backgrounds of any 14/11/2015 18:16 .html# White text on dark backgrounds Light text (#FFFFFF) Opacity The table values relay Primary text 100% Secondary text 70% Hint text.Color .Google design guidelines 11 of 16 https://www.

Google design guidelines 12 of 16 https://www. Different elements in the UI can take on different parts of your color theme. Floating action button using the Switch using the accent color accent color 14/11/2015 18:16 . The toolbar uses the 500 version When editing a folder name. Accent color Use the accent color for your primary action button and components like switches or The status bar should be the darker 700 tint of your primary color. uses indigo as the background color.Color .google. while the status bar entire title and description area uses the 700 version.html# Toolbars and status bars Toolbars and larger color blocks should use the 500 color of the primary color of your app. Bold use of color in large fields is encouraged. the of indigo.Style .

14/11/2015 18:16 .com/design/spec/style/color. Don't.Color . body text color.html# Do. Do.Google design guidelines 13 of 16 https://www. Use the accent color for your Don’t use the accent color for primary action button and app bars or larger areas of color. Don't. the oating action button and the background. components like switches or Avoid using the same color for sliders.Style .google. Only use the accent color for Don’t use the accent color for body text to accent a web link.

Color . The theme specifies the darkness of the surfaces.html# Fallback accent colors If your accent color is too light or dark to sufficiently contrast with the background color. light and dark themes are available to choose from. If your accent color doesn’t work at all.23 MB (.ai) 14/11/2015 18:16 . Themes Themes let you apply a consistent tone to an app. use the 500 version of your primary color on white backgrounds. To promote greater consistency between apps. level of shadow. Download themes Use a fallback accent color over Don’t use the accent color over a background colors that are too background color if there isn’t light or too dark. and appropriate opacity of ink elements.Google design guidelines 14 of 16 https://www. Do. enough contrast. If your background color is the 500 version of your primary color. use a darker or lighter tint of the accent color instead. Don't. make your accent color either white 100% or black 54%.Style .google.

Google design guidelines 15 of 16 https://www. Cards/Dialogs Light theme palette UI application 14/11/2015 18:16 .google. App bar 3.Style .Color . Status bar 2. Background Light theme 1. App bar 3. Cards/Dialogs Dark theme palette UI application Related Using the Material Theme Customize the design to your brand identity. Status bar 2. 14/11/2015 18:16 .html# Dark theme 1.Color .Style . Background 4.Google design guidelines 16 of 16 https://www.