Material Design provides a built-in, baseline color theme that can be used out of the box. It includes default colors for:
- Primary and secondary colors
- Variants of primary and secondary colors
- Additional UI colors (e.g., backgrounds, surfaces, errors, typography, and iconography)

All of these colors can be customized for specific applications.

University of Michigan - Ann Arbor

Google

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

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

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

Additional colors for data visualization

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

Learn Before

Related