Style Color

Color

Color in Material Design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.

Color Tool Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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 palette Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

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 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

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.

Material Design primary color for toolbar, status bar, and button

This primary color is applied to the toolbar and status bar, while also being used to accent the floating action button.

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 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Light theme

1. Status bar
2. App bar
3. Background
4. Cards/Dialogs

Material Design light theme palette

Light theme palette

Material Design UI Application

UI application

Dark theme

1. Status bar
2. App bar
3. Background
4. Cards/Dialogs

Material Design dark theme palette

Dark theme palette

Material Design UI application

UI application

Customize the design to your brand identity.