Color Variations
Complete guide to the three fundamental color variations — tints, shades and tones. See them side by side from any base color, and copy the ones you need.
Tints (+ White)
Lighter versions — created by adding white
Base Color
Shades (+ Black)
Darker versions — created by adding black
Tones (+ Gray)
Muted versions — created by adding gray (reduced saturation)
The Three Color Variations
Every color can be modified in three fundamental ways. These three operations — adding white, adding black, or adding gray — produce the three foundational color variations: tints, shades, and tones.
Tints — Add White
Mixing a color with white lightens it. In HSL, this means increasing the L (lightness) value. Tints feel airy, friendly and soft — they are the foundation of pastel palettes and modern UI surfaces.
Shades — Add Black
Mixing a color with black darkens it. In HSL, this means decreasing the L value. Shades feel grounded, serious and mature — they are used for hover states, borders, text and any element that needs depth.
Tones — Add Gray
Mixing a color with gray reduces its saturation without changing its lightness. Tones feel muted, sophisticated and natural — they are the visual signature of editorial design, vintage aesthetics and earth-inspired palettes.
When to Use Each Variation
- Tints: Backgrounds, cards, disabled states, hover-inverted states, subtle highlights.
- Shades: Text, buttons hover, active states, borders, shadows, dark accents.
- Tones: Secondary text, quiet UI, editorial layouts, vintage/vintage-adjacent designs.