Colors

The Color System

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.

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.