Tints, Shades, and the Math of Mixing Colors

Every design system needs lighter and lighter-fading versions of its brand colors — hover states, disabled buttons, cards, badges. Building them is not an art of eyeballing: a tint is your color mixed with white, a shade is your color mixed with black, and both come from one line of arithmetic.

Tint, shade, tone: the vocabulary

Three words cover the whole family. A tint mixes the base color with white — pink is a tint of red. A shade mixes it with black — navy is a shade of blue. A tone mixes it with gray, muting the color without brightening or darkening it much (the word "tonal palette" in material design refers to this idea broadly). Web work leans almost entirely on tints and shades, and generates them by math rather than by mixing pigments — which is why they are perfectly reproducible in a way a paint counter's "a little more white" never is.

The math: one linear interpolation

A color lives as three numbers — red, green, blue between 0 and 255. Mixing toward white or black is a straight-line walk between your color and the target, controlled by a mix fraction t from 0 (no mixing) to 1 (all target):

new channel = base + (target − base) × t

tint target   = (255, 255, 255)
shade target  = (0, 0, 0)

Worked example with the tomato red #e74c3c = rgb(231, 76, 60). Halfway to white (t = 0.5): red = 231 + (255 − 231) × 0.5 = 243, green = 76 + (255 − 76) × 0.5 ≈ 166, blue = 60 + (255 − 60) × 0.5 ≈ 158 — the salmon #f3a69e. Halfway to black: red = 231 × 0.5 ≈ 116, green = 38, blue = 30 — the brick #74261e. A five-step scale uses t = 1/6 ≈ 17%, then 33%, 50%, 67%, and 83%, giving eleven colors from lightest tint to darkest shade including the base.

Why the scale never touches white or black

A good generator divides the journey so the last step stops just short of the extremes: with N steps the mix fractions run t = i/(N+1), so even the strongest step keeps a trace of the base color. That is deliberate. A step that lands on pure #ffffff or #000000 has lost the hue entirely — it stops being "lighter version of your color" and becomes just white or black. Keeping every step a recognizable relative of the base is what makes a scale usable as a family, and it also keeps the lightest tints from drifting so close to white that text on them fails contrast checks (the failure mode described in how color contrast works).

Mixing light is not mixing paint

Screens mix additively: higher channel values mean more emitted light, and white is all channels full. Pigments mix subtractively: more pigment absorbs more light, and mixing everything gives mud. The consequence is that RGB tints behave more predictably than paint tints — linear interpolation moves every channel at a constant rate, so hue (the color's identity) holds nearly steady while lightness rises or falls. In HSL terms, a tint of #e74c3c keeps the same hue (6°) while lightness climbs from 54% toward 100% and saturation eases down. One honest caveat: because the interpolation happens in RGB space rather than perceptually uniform space, a mid-tint can look slightly less vivid than the HSL numbers suggest — close enough for UI work, but color scientists would use OKLCH for pixel-perfect evenness.

Tints and shades are the other axis from harmonies

Where color harmonies rotate hue around the wheel at fixed lightness, tints and shades hold hue fixed and slide lightness. The two operations compose: pick a blue, rotate it 180° to get an orange partner, then build lightness scales of each, and you have a two-hue system with every weight from whisper to shout. Design systems almost always do exactly this — one or two hue families, each with a 50-to-900 lightness ladder produced by precisely the arithmetic above.

Try it yourself

The Color Shade Generator runs the interpolation for any hex color: choose how many steps, tints only, shades only, or both, and read each step as hex, RGB, or HSL with the mix percentage shown. Use the Color Converter to hop between hex, RGB, and HSL when reasoning about lightness, and the Hex to RGB Converter when you just need the raw channel numbers for a stylesheet or a canvas routine.