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.
Tint, shade, and tone are three terms that describe specific ways to modify a pure color:
Together, these three modifications are how virtually any color palette is constructed from a set of base hues.
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.
In traditional paint mixing:
In digital color (HSL):
In OKLCH, these operations are more perceptually accurate:
Starting from a vivid red (oklch(0.5 0.25 25)):
oklch(0.85 0.1 25): a light blush pinkoklch(0.25 0.2 25): a deep burgundyoklch(0.5 0.08 25): a dusty muted roseIn 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.