DocomintGénérateur de Teintes et Nuances
Générez une échelle complète du plus clair au plus foncé à partir de n'importe quelle couleur de base.
What is a Générateur de Teintes et Nuances?
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.
How to use the Générateur de Teintes et Nuances
- 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
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.
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 — Générateur de Teintes et Nuances runs entirely in your browser using JavaScript/WebAssembly. Your color values is never sent to a server.