Tint, Shade & Tone Calculator
Compute a tint (mix with white), shade (mix with black), or tone (mix with grey) of any hex color.
How to use this tool
- Enter your base hex color.
- Choose whether to create a tint, shade, or tone.
- Set the amount (0% = original color, 100% = pure white/black/grey).
Create tints, shades, and tones from any color for building design palettes. A tint adds white, a shade adds black, a tone adds grey.
Formula
Given a base color (R, G, B) and an amount a (0–100% expressed as a fraction 0–1):
Tint (mix with white): R' = R + (255 − R) × a
Shade (mix with black): R' = R × (1 − a)
Tone (mix with grey, 128): R' = R + (128 − R) × a
The same formula applies to the G and B channels independently. Channels are rounded to integers and clamped to 0–255.
How it works
The calculator parses the hex color into R, G, B integers, then applies one of three linear blending formulas depending on the selected mode. Tint interpolates towards (255, 255, 255), shade interpolates towards (0, 0, 0), and tone interpolates towards (128, 128, 128). The amount percentage controls how far along that interpolation the result sits.
Common mistake: confusing shade with darkening in HSL. Setting HSL lightness to a lower value does not produce the same result as blending with black because the HSL conversion preserves the hue-saturation relationship differently. True shade (blending with black) desaturates slightly in perceptual terms, while reducing HSL lightness keeps saturation constant — the two operations look different, especially on vivid colors.
Worked example
50% tint of red (#ff0000)
- Parse #ff0000: R = 255, G = 0, B = 0. Mode = tint, amount a = 0.50.
- R' = 255 + (255 − 255) × 0.50 = 255 + 0 = 255.
- G' = 0 + (255 − 0) × 0.50 = 127.5 → rounds to 128.
- B' = 0 + (255 − 0) × 0.50 = 127.5 → rounds to 128. Hex: #ff8080.
Result hex: #ff8080 | Result RGB: rgb(255, 128, 128)
Common mistakes to avoid
- Confusing a tint (add white) with a tone (add grey) -- mixing with grey desaturates the hue; mixing with white does not.
- Applying the amount as a percentage integer (e.g. 50) rather than a fraction (0.5), which saturates or overshoots channels past 255.
- Treating shade and tint as symmetrical -- a 50% tint and a 50% shade of the same color will not produce the same lightness distance from neutral grey.
Key terms
- Tint
- A color produced by mixing a base hue with white. Increasing the tint amount makes the color lighter and more pastel.
- Shade
- A color produced by mixing a base hue with black. Increasing the shade amount makes the color darker and more muted.
- Tone
- A color produced by mixing a base hue with grey (medium gray, 50% lightness). Toning reduces the saturation of a color without fully shifting it toward white or black.
- Grey point (128)
- The midpoint of the 0–255 channel range, representing a neutral 50% grey (RGB 128, 128, 128). It is the target color when computing a tone in this calculator.
Frequently asked questions
- What is a tint?
- A tint is a color mixed with white, making it lighter.
- What is a shade?
- A shade is a color mixed with black, making it darker.
- What is a tone?
- A tone is a color mixed with grey, making it less saturated (more muted) without changing lightness dramatically.