The color system

The Material Design color system can be used to create a color theme that reflects your brand or style.


Color usage and palettes

The Material Design color system uses an organized approach to applying color to your UI. In this system, a primary and a secondary color are typically selected to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.

Colors and theming

Your app’s primary and secondary colors, and their variants, help create a color theme that is harmonious, ensures accessible text, and distinguishes UI elements and surfaces from one another.

To select primary and secondary colors, and generate light and dark variants of each, use the Material Design palette tool, Theme Editor, or 2014 Material Design palettes.

A sample primary and secondary palette

  1. Primary color indicator
  2. Secondary color indicator
  3. Light and dark variants

Principles

Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most. Text...

Read More

Hierarchical

Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most.

Legible

Text and important elements, like icons, should meet legibility standards when appearing on colored backgrounds, across all screen and device types.

Expressive

Reinforce your brand by showing brand colors at memorable moments that reinforce your brand’s style.


Color theme creation

The baseline Material color theme

Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box. This includes default colors for...

Read More

Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box.

This includes default colors for primary, secondary, and their variants. This baseline theme also includes additional colors that define your UI, such as the colors for backgrounds, surfaces, errors, typography, and iconography. All of these colors can be customized for your app.

The baseline Material color theme.

Primary color

A primary color is the color displayed most frequently across your app’s screens and components. If you don’t have a secondary color, your primary color...

Read More

A primary color is the color displayed most frequently across your app’s screens and components.

If you don’t have a secondary color, your primary color can also be used to accent elements.

Dark and light primary variants

You can make a color theme for your app using your primary color, as well as dark and light primary variants.

Distinguish UI elements

To create contrast between UI elements, such as distinguishing a top app bar from a system bar, you can use light or dark variants of your primary color on each elements. You can also use variants to distinguish elements within a component, such different variants used on a floating action button container, and the icon within it.

Light and dark variants of a primary color distinguish a top app bar from a system bar.

This UI uses a primary color and two primary variants.

Secondary color

A secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent...

Read More

A secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

Secondary colors are best for:

  • Floating action buttons
  • Selection controls, like sliders and switches
  • Highlighting selected text
  • Progress bars
  • Links and headlines

Dark and light secondary variants

Just like the primary color, your secondary color can have dark and light variants. You can make a color theme by using your primary color, secondary color, and dark and light variants of each color.

Dark and light variants of primary and secondary colors

This UI uses a color theme with a primary, primary variant, and secondary color.

Surface, background, and error colors

Surface, background, and error colors typically don’t represent brand:

Read More

Surface, background, and error colors typically don’t represent brand:

  • Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • The background color appears behind scrollable content. The baseline background and surface color is #FFFFFF.
  • Error color indicates errors components, such as text fields. The baseline error color is #B00020.

A UI showcasing the baseline colors for background, surface, and error color.

Typography and iconography colors

The elements in an app use colors from specific categories in your color palette, such as a primary color. Whenever other screen elements, such as...

Read More

“On” colors

The elements in an app use colors from specific categories in your color palette, such as a primary color. Whenever other screen elements, such as text or icons, appear in front of surfaces using those colors, those elements should use colors specifically designed to appear clearly and legibly against the colors behind them.

This category of colors is called “on” colors, referring to the fact that they color elements that are sometimes placed “on” top of key surfaces that use a primary color, secondary color, surface color, background color, or error color. These are labelled using the original category name (such as primary color) with the prefix “on”.

“On” colors are primarily applied to text, iconography, and strokes. Sometimes, they are also applied to surfaces.

The defaults for these colors are #FFFFFF and #000000.

A UI showcases the baseline colors for text and iconography.

Accessible colors

To ensure that a color provides an accessible background behind light or dark text, you can use light and dark variants of your primary and...

Read More

To ensure that a color provides an accessible background behind light or dark text, you can use light and dark variants of your primary and secondary colors.

Alternatively, these colors can be used for typography that appears in front of light and dark backgrounds.

Color swatches

A swatch is a sample of a color chosen from a range of similar colors.

Check marks indicate whether a text color is legible in front of a background:

  • A white check mark indicates when white text is legible on a background color
  • A black check mark indicates when black text is legible on a background color

For apps that use white text, backgrounds must be accessible against white. These white check marks indicate when white text is accessible against various background color swatches. The 400 color swatch is applied to this UI.

For apps that use black text, backgrounds must be accessible against black. These black check marks indicate when black text is accessible against various background color swatches. The 50 color swatch is applied to this UI.

Alternative colors

The Material Design color system supports alternative colors, which are colors used as alternatives to your brand’s primary and secondary colors (they constitute additional colors...

Read More

The Material Design color system supports alternative colors, which are colors used as alternatives to your brand’s primary and secondary colors (they constitute additional colors to your theme). Apps can use alternative colors to establish themes that distinguish different sections.

Alternative colors are best for:

  • Apps with light and dark themes
  • Apps with different themes in different sections
  • Apps that exist as part of a suite of products

Alternative colors should be used cautiously, because they can be challenging to implement cohesively with existing color themes.

Alternative colors for section themes

Alternative colors can be used to theme different parts of an app. Owl is an educational app that provides courses for people who want to...

Read More

Alternative colors can be used to theme different parts of an app.

This app has three primary colors. Distinct themes are used in different parts of the app, allowing users to better locate themselves within it.

Theme 1

Yellow is used as the primary color for areas such as onboarding and choosing areas of interest.

Theme 2

Blue is used as the primary color for areas of the app that relate to the user’s personal account, such as selected classes.

Theme 3

Pink is used as the primary color for classes.

Additional colors for data visualization

Apps can use additional colors to convey categories that are outside of your main color theme. They are still a part of your full color...

Read More

Apps can use additional colors to convey categories that are outside of your main color theme. They are still a part of your full color palette.

This app has a color theme with five additional colors, which it uses when multiple data visualizations are shown on the same page.

  1. The Accounts section uses green
  2. The Bills section uses orange and yellow
  3. The Budget section uses purple and blue

(Scaled down to 50%)


Tools for picking colors

Material palette generator

The Material palette generator can be used to generate a palette for any color you input. An algorithmic adjustment of hue, chroma, and lightness creates...

Read More

The Material palette generator can be used to generate a palette for any color you input. An algorithmic adjustment of hue, chroma, and lightness creates palettes that are both usable and aesthetically pleasing.

Input colors

Color palettes can be generated based on the primary input color, and whether the desired palette should be analogous, complementary, or triadic in relation to the primary color. Alternatively, the tool can generate expanded palettes for any primary and secondary color input.

Color variations for accessibility

These palettes provide additional ways to use your primary and secondary colors, by providing lighter and darker options to separate surfaces and provide colors that meet accessibility standards.

2014 Material Design color palettes

These color palettes, originally created by Material Design in 2014, comprises of colors designed to work together harmoniously, and can be used to develop your...

Read More

These color palettes, originally created by Material Design in 2014, comprises of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use either the palette generation tool or Material Theme Editor.

Red 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 50 #EFEBE9
100 #D7CCC8
200 #BCAAA4
300 #A1887F
400 #8D6E63
500 #795548
600 #6D4C41
700 #5D4037
800 #4E342E
900 #3E2723
Gray 50 #FAFAFA
100 #F5F5F5
200 #EEEEEE
300 #E0E0E0
400 #BDBDBD
500 #9E9E9E
600 #757575
700 #616161
800 #424242
900 #212121
Blue Gray 50 #ECEFF1
100 #CFD8DC
200 #B0BEC5
300 #90A4AE
400 #78909C
500 #607D8B
600 #546E7A
700 #455A64
800 #37474F
900 #263238
Black #000000
White #FFFFFF