- 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's user interface so that certain colors always convey the same meaning. Attention must also be given to colors with local or cultural significance; for example, alerts may typically be colored red in some cultures but have different connotations in others.

Color Consistency and Cultural 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 usage describes how color is deliberately applied in a user interface to serve four purposes: establishing visual hierarchy among elements, reinforcing brand identity, conveying meaning, and indicating the state of a component (for example, whether it is enabled, disabled, selected, or in error). Each purpose corresponds to a distinct technique for applying color with intent rather than purely for decoration.

Color Usage

Brand colors emphasize brand presence by associating specific interface actions and information with the brand identity. The application of brand color in a user interface can range from bold and prominent to subtle and sophisticated.

Brand Color Application in UI

Color can communicate the current state or changes in state of an app, its components, and its elements. For example, color can indicate whether a button is enabled or disabled. When using color to indicate state changes, ensure the differences are noticeable. Because subtle color differences may be missed by users, it is best to indicate a change of state in multiple ways, such as pairing the color change with an icon or a change in the element's location.

Indicating UI State with Color

In Material Design, contrasting an element’s color with its surroundings increases its visual prominence and signals its importance. This principle applies across bold, bright, monochromatic, and muted color themes. For example, black icons stand out against a white background, while multicolored cards attract attention beside monochromatic elements.

Learn Before

Related

Learn After

Learn After

Related