🌗 Shades & Tints Generator
One base color becomes a full palette: 9 tints toward white and 9 shades toward black, each with its HEX code.
Tints (toward white), hover to see, click to copy
Base
Shades (toward black)
How the shades & tints generator works
Tints mix the base color with white in even steps; shades mix it with black, the classical definitions from color theory. Mechanically, a tint at strength p moves each RGB channel toward 255 by p (channel + (255 − channel) × p), and a shade multiplies each channel by (1 − p) to move it toward 0. A 10% shade of rgb(30, 135, 240) is each channel × 0.9 → rgb(27, 122, 216); a 10% tint is each channel raised a tenth of the way to 255. Each swatch shows its HEX and copies on click, giving you a ready-made ramp for hover states, borders, backgrounds and dark-mode variants.
Design systems run on exactly these ramps (this site's brand blue is a 50-950 scale built the same way). A practical rule: buttons want a shade one or two steps darker for hover, and backgrounds want the palest tints, pairing distant steps keeps text readable.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
Tint = color + white, shade = color + black, tone = color + gray. This tool generates tints and shades; tones follow by mixing with a mid-gray in the color mixer.
How do I pick hover and active states from the ramp?
Convention: hover one step darker than the base, active two steps. Going lighter works for dark UIs, consistency matters more than direction.
Which steps work as text on white?
For a mid-brightness base, usually the two or three darkest shades reach WCAG's 4.5:1, verify the exact pick in the contrast checker (linked below).
Why do very light tints look identical?
Near white, steps compress perceptually, 90% and 95% tints differ by a few RGB points. Ramps in design systems space more steps near the middle for this reason.
How is a 20% shade calculated?
Multiply each channel by (1 − 0.20) = 0.8. A 20% shade of rgb(30, 135, 240) is rgb(24, 108, 192). Tints work the other direction: a 20% tint moves each channel a fifth of the way to 255.
Is a tint the same as raising HSL lightness?
Similar but not identical. This tool mixes toward white/black in sRGB, which is the classic tint/shade definition; raising HSL lightness follows a different path and can shift how saturated the color looks. For a perceptually even ladder, use the OKLCH scale generator instead.
Is this processed locally?
Yes, generation is instant and offline-capable.