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

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

Backdrop in UI

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

Arizona State University

University of Michigan - Ann Arbor

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

Color

Material Design Documentation

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 helps express hierarchy, establish a brand presence, give meaning, and indicate element states.
- Hierarchy 
- Brand
- Meaning 
- State

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