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.
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
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 and important elements, like icons, should meet legibility standards when appearing on colored backgrounds, across all screen and device types.
Reinforce your brand by showing brand colors at memorable moments that reinforce your brand’s style.
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.
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.
You can make a color theme for your app using your primary color, as well as dark and light primary variants.
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.
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:
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 typically don’t represent brand:
A UI showcasing the baseline colors for background, surface, and error color.
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.
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.
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.
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:
Alternative colors should be used cautiously, because they can be challenging to implement cohesively with existing color 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.
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.
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.
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.
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.Material palette generator
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.
<div class="deep-purple"> ... </div> <div class="deep-purple-300"> ... </div> <div class="deep-purple-100"> ... </div>
<div class="bg-deep-purple"> ... </div> <div class="bg-deep-purple-300"> ... </div> <div class="bg-deep-purple-100"> ... </div>