10 Principles for Color Usage in UI Design

Best practices, tips, and terminology for using color in UI.

1. Color Terminology

Color terminology forms our foundation of color knowledge. Think of color terms like hue, tint, and shade as tools that we can employ to develop unique color palettes.

• Hue

Hue is a technical term for color. Hue refers to the parent color — a saturated color without white or black added to it.

• Tint

A tint is created when white is added to a hue.

• Shade

A shade is created when black is added to a hue.

• Tone

A tone is created when gray, both tint (white) and shade (black), are added to a hue.

• Value

Value refers to the lightness or darkness of a color. It indicates the quantity of light reflected.

• Saturation

Saturation refers to the brilliance and intensity of a color. Highly saturated colors are vibrant and radiant, while low saturated colors are dull.

2. Hierarchy