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

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

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:

• 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

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

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

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

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

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

launch

Material palette generator

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 brand palette. To generate your own harmonious palettes, use either the palette generation tool or Material Theme Editor.

Each of these colors is defined with a base color css class and an optional lighten or darken class.

Text color

<div class="deep-purple">
    ...
</div>
<div class="deep-purple-300">
    ...
</div>
<div class="deep-purple-100">
    ...
</div>

Background color

<div class="bg-deep-purple">
    ...
</div>
<div class="bg-deep-purple-300">
    ...
</div>
<div class="bg-deep-purple-100">
    ...
</div>