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

Dark and light primary variants

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.

Distinguish UI elements

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

University of Michigan - Ann Arbor

Important details about the following: 
The baseline Material color theme
Primary color
Secondary color
Surface, background, and error colors
Typography and iconography colors
Accessible colors
Alternative colors
Alternative colors for section themes
Additional colors for data visualization

Color theme creation

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.

The baseline Material color theme

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

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

Secondary color

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.

Typography and iconography 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, these colors can be used for typography that appears in front of light and dark backgrounds.

Accessible colors

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

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.

Learn Before

Related

Learn After