- This weather app pairs color with weather conditions
- A navigation app uses color to signal traffic conditions.

Examples of Meaning Using Color

Color should be used consistently in a product so that certain colors always mean the same thing.
- Attention should also be given to colors with local or cultural significance
- For example, alerts may typically be colored red in some cultures but not in others

Consistency and Context in UI

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

Arizona State University

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

Color Usage

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

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 

Learn Before

Related

Learn After