Tints, Shades & Tones
Tints, shades and tones are the three ways to vary a single hue. Generate all three for any color below, click a swatch to copy it, then read how each one is used.
Tints (mixed with white)
Shades (mixed with black)
Tones (mixed with gray #808080)
Mixing is done per RGB channel in sRGB, the same as CSS color-mix(in srgb, …). Text on each swatch uses black or white, whichever has more contrast.
Tint: hue + white
A tint lightens a color by mixing it with white. Pastels are tints. In UI work, light tints of a brand color make good backgrounds for alerts, selected rows and badges, because they keep the brand hue without competing with text.
Shade: hue + black
A shade darkens a color by mixing it with black. Shades are the usual choice for hover and pressed states of buttons, and for text in the brand hue, since darker colors reach the 4.5:1 WCAG contrast requirement on white more easily.
Tone: hue + gray
A tone mixes a color with gray. It lowers saturation while keeping lightness roughly similar, which gives muted, "dusty" colors such as sage green or dusty rose. Tones are useful when a fully saturated color feels loud, for example in large areas or in earth-tone palettes.
Doing it in CSS
:root {
--brand: #2D5BE3;
--brand-tint-20: color-mix(in srgb, var(--brand), white 20%);
--brand-shade-20: color-mix(in srgb, var(--brand), black 20%);
--brand-tone-20: color-mix(in srgb, var(--brand), gray 20%);
}color-mix() is supported in all current major browsers. Mixing in oklch instead of in srgb often keeps mid-tones more vivid. For full design-system scales, see our Tailwind color config guide and CSS color variables guide.
Monochromatic palettes
A palette built only from tints, shades and tones of one hue is called monochromatic. It is the easiest harmony to keep consistent; add one contrasting accent color if you need calls to action to stand out. Compare it with the other schemes in our color harmonies guide.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint is a color mixed with white (lighter), a shade is a color mixed with black (darker), and a tone is a color mixed with gray (less saturated). All three keep the original hue.
How do I make a lighter version of a HEX color?
Mix it with white: for each RGB channel, new = old + (255 − old) × amount. 20% toward white is a light tint; 90% is almost white. CSS can do this for you with color-mix(in srgb, #2D5BE3 20%, white).
Are tints and shades the same as a Tailwind-style 50-950 scale?
Close, but design-system scales are usually tuned by eye or built in a perceptual space such as OKLCH, so mid-tones keep their saturation. Pure white/black mixing is a solid, predictable starting point.