The color system

The Material Design color system can help you create a color theme that reflects your brand or style.


Color usage and palettes

The Material Design color system helps you apply color to your UI in a meaningful way. In this system, you select a primary and a secondary color to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.

Colors and theming

Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.

The Material Design palette tool or 2014 Material Design palettes are available to help you select colors.

A diagram of primary and secondary color palettes with three callouts
A sample primary and secondary palette

1. Primary color
2. Secondary color
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...

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.

Expressive

Show 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. It includes default colors for:...

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 and secondary colors
  • Variants of primary and secondary colors
  • Additional UI colors, such as colors for backgrounds, surfaces, errors, typography, and iconography.

All of these colors can be customized for your app.

Diagram of Material color scheme displaying the baseline Material color theme
The baseline Material color theme

Primary color

A primary color is the color displayed most frequently across your app’s screens and components. Your primary color can be used to make a color...

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

Dark and light primary variants

Your primary color can be used to make a color theme for your app, including dark and light primary color variants.

Distinguish UI elements

To create contrast between UI elements, such as a top app bar from a system bar, you can use light or dark variants of your primary colors. You can also use these to distinguish elements within a component, such as the icon of a floating action button from its circular container.

A top app bar uses light and dark primary color variants to distinguish it from a system bar.
Diagram showing the relationship between color palette selections and an app screen
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...

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.

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

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. A color theme can use your primary color, secondary color, and dark and light variants of each color.

Dark and light variants of primary and secondary colors
Diagram showing the relationship between color palette selections and an app screen
This UI uses a color theme with a primary color, a primary variant, and a secondary color.

Surface, background, and error colors

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

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 in components, such as invalid text in a text field. The baseline error color is #B00020.
Diagram with three callouts showing the relationship between color palette selections and an app screen
A UI showcasing the baseline colors for background, surface, and error color:

1. Baseline background color: #FFFFFF
2. Baseline surface color: #FFFFFF
3. Baseline error color: #B00020

Typography and iconography colors

App surfaces use colors from specific categories in your color palette, such as a primary color. Whenever elements, such as text or icons, appear in...

"On" colors

App surfaces use colors from specific categories in your color palette, such as a primary color. Whenever elements, such as text or icons, appear in front of those surfaces, those elements should use colors designed to be clear and legible against the colors behind them.

This category of colors is called “on” colors, referring to the fact that they color elements that appear “on” top of surfaces that use the following colors: a primary color, secondary color, surface color, background color, or error color. When a color appears “on” top of a primary color, it’s called an “on primary color.” They are labelled using the original color category (such as primary color) with the prefix “on.”

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

The default values for “on” colors are #FFFFFF and #000000.

Diagram with five callouts showing the relationship between color palette selections and text and iconography in an app screen
A UI showcases the baseline colors for text and iconography:

1. Baseline on primary color #FFFFFF
2. Baseline on secondary color #FFFFFF
3. Baseline on background color #B00020
4. Baseline on surface color #B00020
5. Baseline on error color #B00020

Accessible colors

To ensure an accessible background behind light or dark text, your background can use light or dark variants of your primary and secondary colors. Alternatively,...

To ensure an accessible background behind light or dark text, your background can use light or 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
Diagram of text color choices that maintain legibility against a background color palette, with an app screen showing one combination
Apps that use white text must have backgrounds that are accessible against white text. These white check marks indicate when white text is accessible against various background color swatches. The 400 color swatch is applied to this UI.
Diagram of text color choices that maintain legibility against a background color palette, with an app screen showing one combination
Apps that use black text must have backgrounds that are 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...

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). Alternative colors can be used to distinguish different sections of a UI.

Alternative colors are best for:

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

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

Light and dark themes

Some apps have both light and dark themes. To maintain visibility of elements and legibility of text, you can adapt the different color schemes for dark and light themes.

Light theme version of a news app screen
A news app in a light theme uses a primary and secondary scheme.
Dark theme version of a news app screen
The same news app in dark theme uses a different color scheme to maintain legibility.

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

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

Diagram of how each primary color of 3 themes is applied to 3 different themed app screens
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 content of interest.

Diagram of how a theme’s primary and secondary colors are applied to components in an app screen

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

Diagram of how a theme’s primary and secondary colors are applied to components in an app screen

Theme 3

Pink is used as the primary color for courses.

Diagram of how a theme’s primary color is applied to components in an app screen

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

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.

App screen with data visualizations that use additional colors and 3 callouts
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. Hue, chroma, and lightness are adjusted by an algorithm...

The Material palette generator can be used to generate a palette for any color you input. Hue, chroma, and lightness are adjusted by an algorithm that creates palettes that are 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, based on any primary and secondary color.

Color variations for accessibility

These palettes provide additional ways to use your primary and secondary colors. They include 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, are comprised of colors designed to work together harmoniously, and can be used to develop

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

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

Up next