In a color system, an "on" color is the color applied to elements placed on top of a given base color — primarily text, iconography, and strokes, and sometimes surfaces — so that those elements remain legible against that base color. The default "on" color values are #FFFFFF (white) and #000000 (black), chosen for maximum contrast.

"On" colors

App surfaces use defined palette roles, such as the primary color. Text and icons placed on a surface should use foreground colors selected for clear legibility against that surface.

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

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

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 in Material Design

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.

Baseline Material Color Theme

Additional palette colors extend an app's main color theme so data visualizations can distinguish categories not covered by that theme. Although outside the main theme, these colors remain part of the app's full color palette.

Additional palette colors for data visualization

Color roles for typography and icons on app surfaces

Accessible color variants are light or dark versions of a theme's primary and secondary colors selected for text-and-background combinations. A variant can be used as the background behind light or dark text or as the text color on a light or dark background.

Learn Before

Related

Learn After