Three Ways to Modify a Color
Every color can be transformed in three fundamental ways: by adding white, adding black, or adding gray. These three operations have specific names that every artist and designer should know: tints, shades, and tones. Understanding the difference between them gives you precise control over your color palette and dramatically expands your creative range.
What Is a Tint?
A tint is created by adding white to a pure hue. Tints are sometimes called pastels. When you add white to red, you get pink. Add white to blue, you get baby blue. Add white to green, you get mint.
What white does to a color:
- Raises the value (makes it lighter)
- Reduces the saturation (makes it less intense)
- Preserves the hue (the color family stays the same)
Tints feel soft, airy, and gentle. They are widely used in nursery design, spring fashion, and UI design where a color is needed but full saturation would be overwhelming.
What Is a Shade?
A shade is created by adding black to a pure hue. Shades are richer, deeper, and more dramatic than the original color. Adding black to red gives you burgundy or maroon. Adding black to blue gives you navy. Adding black to green gives you forest or hunter green.
What black does to a color:
- Lowers the value (makes it darker)
- Can increase apparent saturation initially, then reduces it
- Preserves the hue (the color family stays the same)
Shades feel rich, serious, and sophisticated. They are used in luxury branding, evening wear, and dark mode UI design.
What Is a Tone?
A tone is created by adding gray to a pure hue. Tones are more complex and nuanced than either tints or shades. Adding gray to red gives you a dusty rose or muted brick. Adding gray to blue gives you a slate or denim color.
What gray does to a color:
- Lowers the saturation (desaturates it)
- Slightly shifts the value depending on the gray used
- Preserves the hue (but the color may appear "muted" or "earthy")
Tones feel sophisticated, muted, and natural. Earth tones — ochre, terracotta, sage, dusty pink — are all tones. They are extremely popular in contemporary interior design and artisanal branding.
Practical Applications in Art and Design
In painting, understanding tints, shades, and tones helps you mix more complex and realistic colors. For example, shadows in a painting are rarely pure shades (color + black) — they often contain a complementary color hue. Highlights are rarely pure tints — they may include a warm or cool shift depending on the light source.
In graphic and UI design, modern design systems use tints, shades, and tones to build out a full color scale for a single brand color — typically 9–11 steps from lightest tint to darkest shade — providing a full range for backgrounds, surfaces, text, and interactive states.
When to Use Each
- Tints — backgrounds, large areas, soft and approachable aesthetics
- Shades — depth, contrast, dramatic or luxurious effects, dark UI
- Tones — sophisticated, organic, muted aesthetics; earth-tone palettes
Experiment with tints, shades, and tones in our color mixer to see exactly how white, black, and gray transform any hue in real time.