DocomintTint & Shade Generator
Generate a full lighter-to-darker ramp from any base color, for design-system color scales.
Design systems like Tailwind or Material ship a 50–900 numbered scale for every color, built the same way this tool does it: mixing the base color toward white for lighter steps (tints) and toward black for darker steps (shades). This generates that full ramp from one starting color instead of hand-picking each step, so hover/active/disabled states share a mathematically consistent relationship to your brand color.
Example: A base of #4f46e5 with 5 steps each direction produces a ramp from a near-black shade (mixed 83% toward black) up through the base to a near-white tint (mixed 83% toward white) — ten additional swatches ready to drop into a design token file.
How it works
- Pick a base color and how many steps you want in each direction
- Each step mixes the base with white (tints) or black (shades) on your device
- Copy any swatch's hex, or the whole ramp as CSS custom properties
Frequently asked questions
What's the difference between a tint and a shade?
A tint mixes a color with white (making it lighter); a shade mixes it with black (making it darker). "Tone" — mixing with gray — is a related third term this tool doesn't separately generate, since a tint/shade ramp already covers the light-to-dark range most design scales need.
How many steps should a color ramp have?
5 steps each direction (11 total including the base) covers most UI needs — enough for hover/active/disabled states with room to spare. Design systems that need finer control over accessibility contrast at every step sometimes go up to 9 each direction, the max this tool supports.
Is my color values uploaded anywhere?
No — Tint & Shade Generator runs entirely in your browser using JavaScript/WebAssembly. Your color values is never sent to a server.