Through color difference:
- Shadow overlay the top and bottom bars can be differentiated
- Other surfaces can be demarcated

Identifying App Bars

When an app’s top or bottom app bar color is the same color as the background color:
- Blend together
- Placing emphasis on an app’s content instead of its structure

Blending an App Bar with the Background

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

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

Top and Bottom App Bars

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

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