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.