Tint, Shade, and Tone
Three methods of modifying a base color by mixing it with white (tint), black (shade), or gray (tone) to produce lighter, darker, or more muted variations.
What are Tint, Shade, and Tone?
Tint, shade, and tone are three terms that describe specific ways to modify a pure color:
- Tint: A color mixed with white. Tints are lighter and less saturated versions of the original hue. Pinks are tints of red, sky blue is a tint of blue.
- Shade: A color mixed with black. Shades are darker versions of the original hue. Burgundy is a shade of red, navy is a shade of blue.
- Tone: A color mixed with gray (or both black and white). Tones are more muted and complex than the pure hue. They lose saturation without simply becoming lighter or darker.
Together, these three modifications are how virtually any color palette is constructed from a set of base hues.
Why are Tint, Shade, and Tone important?
Understanding the difference between tints, shades, and tones helps you build richer, more nuanced palettes. Rather than using only saturated "pure" colors, you can construct a full range from the lightest tint (nearly white) to the deepest shade (nearly black), with tones available for more complex, muted expressions.
In design system terms, a shade scale (confusingly, designers use "shade" colloquially to mean any color variation) typically spans all three modifications: the lightest values are tints, the darkest are shades, and the middle values are often tones.
How to apply Tint, Shade, and Tone
In traditional paint mixing:
- Add white to create a tint
- Add black to create a shade
- Add gray (or complementary color) to create a tone
In digital color (HSL):
- Increasing lightness toward 100% approximates a tint
- Decreasing lightness toward 0% approximates a shade
- Decreasing saturation approximates a tone
In OKLCH, these operations are more perceptually accurate:
- Increase L for tints
- Decrease L for shades
- Decrease C (chroma) for tones
Examples
Starting from a vivid red (oklch(0.5 0.25 25)):
- Tint:
oklch(0.85 0.1 25): a light blush pink - Shade:
oklch(0.25 0.2 25): a deep burgundy - Tone:
oklch(0.5 0.08 25): a dusty muted rose
Best practices
- Use tints for backgrounds, selected states, and subtle highlights
- Use shades for text, pressed states, and deep shadows
- Use tones for neutral-adjacent UI elements: borders, disabled states, placeholder text
- Avoid using only pure saturated colors in a UI. Tints and tones make the design feel more refined. Always check contrast when using tints for text
FAQs
In design system terminology, 'shade scale' (or 'color scale') refers to the full range of lightness variations for a single hue, including tints, tones, and shades in the traditional sense. This is slightly confusing because 'shade' in painting specifically means mixing with black. In common design usage, 'shades of blue' just means 'variations of blue' of any kind.
Pastels are essentially light tints. They are tints with enough white mixed in that they appear soft and low-contrast. Not all tints are pastels: a 10% tint of red is still quite vivid, while a 70% tint is clearly pastel. Pastels have become a design trend in their own right, often associated with soft, friendly, or premium aesthetics.
Tints (lighter versions) and shades (darker versions) are where accessibility-friendly text colors live. A shade dark enough to pass 4.5:1 contrast against a white background, or a tint light enough to pass against a dark background, is how you choose accessible text colors from a palette. The pure, fully saturated version of most hues often fails contrast requirements. Shades and tints are what make colors usable for text.