Color

Color Tool

The Color Tool helps you create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.

Create Material Design color schemes with variations

Create color schemes

Create color schemes that include darker and lighter variations of your primary and secondary colors.

Test Material Design accessibility on varied backgrounds

Test accessibility

Check if text is accessible on different-colored backgrounds, as measured using the Web Content Accessibility Guidelines legibility standards.

Preview Material Design color scheme in UI components

Preview your UI in color

Preview the look of your color scheme across a range of Material Design components, with editable HTML, CSS, or JavaScript in Codepen.

Color Tool

Create color palettes for your UI and test color accessibility

Color palette

The 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.

Themes enable consistent app styling through surface shades, shadow depth, and ink opacity.

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

Color system

Choosing a color scheme

You can customize your app’s color scheme to match your brand colors. Alternatively, you can create an entirely new color scheme using the material design color palette.

When creating a color scheme:

Use the Color Tool to create and apply palettes to your app
Ensure your app’s color usage meets accessibility standards, with sufficient contrast between elements

Expressing Brand in Material

A step-by-step guide to staying on-brand with Material Design

Material Design’s color system

In Material Design, a primary color refers to a color that appears most frequently in your app. A secondary color refers to a color used to accent key parts of your UI.

Using colors from the Material Design palette is optional.

Material Design color scheme: primary, secondary, and shades — This color scheme has a primary color, lighter and darker versions of that color, and a secondary color.

Material Design: lighter primary color and secondary accent — Beneath the region using the primary color, related information is colored with a lighter version of the primary color. The floating action button uses the secondary color to accent it.

Material Design color scheme with primary and variants — This color scheme contains a primary color, plus darker and lighter versions of that color.

Primary color

A primary color is the color displayed most frequently across your app’s screens and components. It can also be used to accent elements, if you don’t have a secondary color.

To create contrast between elements, you can use lighter or darker tones of your primary color. The contrast between lighter and darker tones helps show division between surfaces, such as between the status bar and a toolbar.

Material Design color scheme with varying primary tones — This color scheme contains different tones of the primary color, for when lighter or darker contrast is needed.

Secondary Color

A secondary color is used to accent select parts of your UI. It can be complementary or analogous to your primary color, but it should not simply be a light or dark variation of your primary color. It should contrast with elements that surround it and be applied sparingly as an accent.

Secondary colors are best used for:

Buttons, floating action buttons, and button text
Text fields, cursors, and text selection
Progress bars
Selection controls, buttons, and sliders
Links
Headlines

Using a secondary color is optional. It’s not necessary if you use variations of your primary color to accent elements.

Material Design secondary color scheme with varied tones — A secondary color scheme with varied tones.

Material Design: Use secondary colors for contrast sparingly — Secondary color schemes do not have to be colorful. They only need to contrast with surrounding elements and be used sparingly throughout your UI.

Using color in your app

Large UI areas and elements should be colored with your primary color. A secondary color can be used to accent smaller areas. If you don’t have a secondary color, you can use your primary color instead for these areas.

Material Design floating button in secondary color with phone icon — The floating action button is accented using the secondary color, while the phone icon uses the primary color.

Material Design switch features secondary accent color — The switch uses the secondary color as an accent. The system bar uses the primary color, while the toolbar uses a darker variation of the primary color.

Use the primary color to accent elements, such as buttons or checkboxes.

Elements that appear rarely, such as alerts, should be distinct from other elements and not use your primary color.

Material Design: Use primary color for selected buttons — To indicate that buttons and checkboxes are selected, use the primary color as an accent.

Material Design secondary color for buttons and links — Your secondary color can be used on typical elements, such as buttons and links.

Secondary colors, and anything used to accent parts of the UI, should be used sparingly.

Use secondary color for links in Material Design — Do.
Use a secondary color for certain text, such as linked text.

Avoid bright colors for body text in Material Design — Don’t.
Don’t use bright colors for body text, even if your primary or secondary colors are bright.

See the Color Tool for more guidance about typographic legibility on color.

Use primary color as link accent in Material Design — Do.
You can use your primary color as a link accent.

Emphasize text with primary/secondary colors in Material Design — Do.
Use your primary or secondary color to emphasize select shorter text, such as headlines.

Material Design: Use secondary color for primary button — Do.
Use your secondary color for your primary action button.

Do not use secondary color for Material Design elements — Don’t.
Don’t use the secondary color for app bars, larger areas of color, or the floating action button if it rests on a background of that color.

Use a monochromatic accent for Material Design balance — Do.
Use a monochromatic color as an accent to let imagery and other colorful elements take prominence.

Use Material Design primary color tones for overlay elements — Do.
You can use your primary color in a different tone on elements that rest on top of a primary color region (like this floating action button).

Material Design: Use secondary color for text fields and switches — Do.
Text fields and switches can use your secondary color as an accent.

Text selection accent with secondary color in Material Design — Do.
Text selection can use your secondary color as an accent.

Alternative secondary colors

If your secondary color is too light or dark to sufficiently contrast with the background color, use a lighter or darker shade of the secondary color instead.

Material Design: Use a contrasting tone for your secondary color — Do.
Use a different tone of your secondary color against backgrounds that are very light or very dark.

Material Design: Ensure contrast between background and colors — Don’t.
Don’t use a secondary color on top of a background if there is not enough contrast between the two colors.

Usability

Hierarchy

Hierarchy refers to organizing content according to different levels of importance. Color can convey how important some content is relative to other content.

For example, a brightly colored button on a colorless background makes that button stand out. Alternatively, colorless bars and buttons allow bright content to take prominence in a UI.

Material Design: Bold colors enhance action button and toolbar — Bold color emphasizes the floating action button and the toolbar, giving prominence to message creation and navigation.

Colorless Material Design bars enhance colorful content — Colorless bars and buttons allow colorful content to take precedence, deemphasizing the status and navigation bars.

Meaning

Color may be used to communicate the meaning of various elements on a screen. A weather app may display colors that indicate current weather conditions, and a maps app may use color to show traffic conditions, with roads colored red or green.

Weather app with Material Design signals time of day — A weather app uses color to signal the time of day.

Material Design colors indicate traffic conditions on maps — A maps app uses color to signal traffic conditions.

State

Color can provide information about:

An element’s current state, such as if a button is enabled or disabled
An app or element’s change of state

Color that indicates a change of state should be noticeable, as subtle differences in color may be missed. It’s best to indicate a change of state in more than one way, such as displaying an icon or moving the location of an element.

Red label and helper text indicate Material Design errors — The red color in the label and helper text indicate error messages.

Material Design color changes from blue to red — The color changes from blue to red to indicate different states.

Contrast

Your app’s primary and secondary colors should ensure sufficient color contrast between elements so that all users can see and use your app.

To learn more about color, contrast, and accessibility design, read Material Design Accessibility.

Material Design UI with red for time and green for fog — In this UI, red signifies the time of day and green represents the foggy weather.

Material Design UI view for users with color blindness — This is how users with deuteranopia (red/green color blindness) might see the UI shown to the left. They might not be able to see differences between text and other elements.

Additional affordances, beyond color, should be used to convey information.

Material Design: Offer enlarged text for better readability — Smaller text may be difficult to read for individuals with cataracts, for whom your UI may appear blurry. Elements without sufficient contrast get lost in the background.
To accommodate all users, offer enlarged text settings.

Text on backgrounds

Text should be legible on the background on which it appears. It is recommended that:

Dark gray text is used on light backgrounds
Light gray text is used on dark backgrounds

If your app has both light and dark themes, the text should be available in a contrasting color against each theme.

Legibility

Text that appears on colored backgrounds should be legible and meet accessibility standards. Both backgrounds and text must use colors and opacities that, when used together, meet these standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a contrast ratio of 4.5:1 for normal text and a 3:1 ratio for large text.

Material Design: Use opacity for better contrast — Do.
Using opacity instead of shifting colors often creates better contrast and relative luminance. For example, gray text (#727272) becomes hard to read if the background color changes to magenta.

Material Design: Gray reduces contrast, harming readability — Don’t.
Shifting to gray instead of decreasing contrast on black often lowers the relative luminance, making typography unreadable.

Dark text on light backgrounds

The level of opacity used for text depends on whether your background is dark or light. For dark text on light backgrounds, apply the following opacity levels:

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 (such as text fields and labels) and disabled text have even lower visual prominence with an opacity of 38%

Material Design: Dark text opacity on light backgrounds

Dark text (#000000)	Opacity
Primary text	87%
Secondary text	54%
Disabled text, hint text	38%
Dividers	12%

White text on dark backgrounds

White text appearing on colored backgrounds should do so at an opacity of 100%.

Material Design: Text importance for dark backgrounds — The table relays relative levels of importance for white text on dark backgrounds.

Light text (#FFFFFF)	Opacity
Primary text	100%
Secondary text	70%
Disabled text, hint text	50%
Dividers	12%

Icons and other elements

Elements like icons benefit from having a hex value of black or white at 38% opacity so that they work on backgrounds of any color.

Dark icons (#000000)	Opacity
Active Icon	54%
Inactive Icon	38%

Light icons (#FFFFFF)	Opacity
Active Icon	100%
Inactive Icon	50%

Colored text and backgrounds

Use colored text on colored backgrounds sparingly, limiting usage to important text elements. Colored text should be used to indicate importance and selective emphasis.

See the Color Tool to determine if certain foreground colors used for typography meet accessibility standards against different background colors.

Use contrasting colors for important text in Material Design — Do.
Use a contrasting color (such as your secondary color) on important text to contrast it against the background.

Material Design: Avoid colored text on colored backgrounds — Don’t.
Avoid placing a large amount of colored text on colored backgrounds.

Use darker or lighter tones for a monochrome Material Design look — Do.
You can use a darker or lighter tone of color to create a monochrome, yet accentuated, look.

Material Design: Avoid low-contrast color combinations — Don’t.
Don’t place low-contrast tones of the same color against each other. It’s difficult to read text with a low contrast against its background.

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)