Color should be applied throughout a UI consistently and compatible with the brand.

Consistency for Color Application 

"Color should be applied purposefully as it can convey meaning in multiple ways, such as relationships between elements and degrees of hierarchy."

Intentional for Color Application 

Color should create a distinction between elements, with sufficient contrast.

Distinction for Color Application 

Principles and guidelines that "describe a variety of UI components and elements where color application is important."
- Consistent
- Distinct
- Intentional 

University of Michigan - Ann Arbor

Arizona State University

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

Applying color to UI

Material Design Documentation

The fundamental skill of coloring interface designs is being able to modify one base color into many different variations. Many great-looking interfaces is that they often have darker and lighter variations on a particular theme color.

Darker variations:
- Brightness decreases.
- Saturation increases.
- Hue (often) shifts towards a luminosity minimum (red, green, or blue).

Lighter variations:
- Brightness increases.
- Saturation decreases.
- Hue (often) shifts towards a luminosity maximum.

Color Variations

The way color is applied to the top and bottom app bars:
- Helps users identify them 
- Understand their relationship to surrounding elements

Top and Bottom App Bars

Usage in UI

The backdrop has a front and back layer.

Distinguish between these two layers:
- The baseline back layer color is your primary color 
- Baseline front layer is white

Learn Before

Related

Learn After