In Material Design, color draws attention to specific elements on-screen. When an element’s color contrasts with its surroundings, that element stands out, so users can tell it’s important. Because color themes vary:
- bold and bright, 
- monochromatic or muted

For example, 
- Black icons stand out when they are placed against a white background
- Multicolored cards draw attention to themselves when placed next to monochromatic colors

Hierarchy in Material Design

Color can provide information about the state of an app, its components, and its elements. 

This includes:

- Current state of an element or component, such as whether a button is enabled or disabled
- Changes in state to an app, component, or element
- Color should be noticeable when indicating state changes, such as subtle differences - Color may be missed so it’s best to indicate a change of state in more than one way, such as displaying an icon or moving the location of an element

State of an App Determined by Web Elements

Color communicates the meaning of different UI elements. For example, a weather app displayed colors indicating current weather conditions.

Meaning with Color in UI

Your brand can use color to emphasize its presence. Brand colors can be used in key moments, in ways that associate those colors with specific actions and information.

The brand color application can be bold and brash, subtle and sophisticated, or anywhere in between. Your brand’s personal approach to color should be reflected in your app by: 

- Bold
- Launch Screens
- Onboarding
- Feature Discovery
- Subtle Use of Color
- Placeholder
- Progress Indicatios
- State Changes 

Brand and Color Usage 


Color helps express hierarchy, establish a brand presence, give meaning, and indicate element states.
- Hierarchy 
- Brand
- Meaning 
- State

Arizona State University

University of Michigan - Ann Arbor

- The color system
- Applying color to UI
- Color usage 
- Text legibility
- Dark theme

Color

- Usage in UI
- Top and bottom app bars
- Backdrop
- Color variations

Applying color to UI

"The Material Design color system can help you create a color theme that reflects your brand or style"

- Color Usage and Palettes
- Color Themes Creation
- Tools for Picking Colors 

The Color System

Color Usage

"A dark theme is a low-light UI that displays mostly dark surfaces."

Dark Theme 

"Color plays an important role in text legibility."

Text Legibility

A dark theme is an option that creates a low-light UI that shows mostly dark surfaces.

Dark Theme

Color harmony refers to the technique of combining colors in a way that is visually pleasing. It involves understanding the relationships between colors and using them to convey meaning and create a specific aesthetic. One way to learn about these relationships is by studying the color wheel.

Color Harmony

Material Design system enable more customized colors since Android 12 was launched. The system can build personal color scheme based on the user's wallpaper or app content. 

Learn Before

Related

Learn After