🌗 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. 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.
Is this processed locally?
Yes — generation is instant and offline-capable.