What's the difference between a shade, a tint and a tone?

A shade adds black to a base colour (darker, same hue). A tint adds white (lighter, same hue). A tone adds grey (less saturated, same hue and lightness). This generator emits shades and tints because that's what design systems use - a tone ramp is rarely what people search for.

Why a 50/100…950 scale?

It matches Tailwind CSS and most design tokens, where 500 is roughly the base, 50 is near-white, and 950 is near-black. Using the same numbering means anyone reading your design tokens immediately understands the relative weight. Material uses 50/100/200…900; Tailwind extends that with 950 for a deeper black.

Does the ramp guarantee perceptually-uniform steps?

No - this generator interpolates in HSL, which is faster and matches how CSS works natively, but not perceptually uniform. The middle steps (200-700) usually look evenly spaced; the extremes (50, 950) compress visually. For a perceptually-uniform ramp, generate in OKLCH or LCH - newer design tokens (Tailwind v4, Radix Colors) do this for the same reason.

How do I export the ramp as CSS variables?

Click 'Copy as CSS'. The output is a block of `--brand-50: #...; --brand-100: #...;` lines you can paste into your `:root` or a Tailwind config. Rename the prefix in the input to match your token namespace (`--primary`, `--accent`, etc.) before copying.

Will the 500 shade exactly match my input?

Yes - the 500 swatch is your input colour unchanged. The lighter steps (50-400) are progressive mixes toward white, the darker steps (600-950) toward black. If you pick a very dark or very light base, the ramp can look lopsided - in that case adjust the base hex closer to a 50% lightness and re-run.

Générateur de nuances de couleur

Générez 10 nuances et 10 teintes de toute couleur - prêt en liste hex ou variables CSS.

Fonctionne dans votre navigateur

Tapez un hex ; obtenez une rampe de 21 étapes. Les teintes (base mélangée au blanc) montent à gauche, les nuances (mélangées au noir) descendent à droite, et la base reste au milieu. La sortie suit l'échelle 50/100/200…900/950 utilisée par Tailwind, Material et la plupart des design systems modernes. Cliquez sur un échantillon pour copier son hex, ou exportez toute la rampe en propriétés CSS.

Couleur de base

Préfixe variable CSS

Rampe de nuances

Cliquez sur un échantillon pour copier son hex.

Propriétés CSS personnalisées

--brand-50: #f5f9ff;
--brand-100: #e2ecfe;
--brand-200: #c4dafc;
--brand-300: #a7c7fb;
--brand-400: #89b4fa;
--brand-500: #629bf8;
--brand-600: #3472d8;
--brand-700: #2a5eb1;
--brand-800: #204887;
--brand-900: #16315d;
--brand-950: #0d1d36;

Comment l'utiliser

Pick the base colour
Use the colour picker or paste a hex. The full ramp recomputes instantly.
Inspect the swatches
Each swatch shows its token number (50-950) and hex. Click any swatch to copy its hex.
Rename the prefix
Change `--brand` to your token namespace (`--primary`, `--accent`, etc.) so the exported CSS matches your conventions.
Copy as CSS
Click 'Copy as CSS' to get the full block of custom properties ready to paste into your stylesheet or Tailwind config.

Qu'est-ce que c'est ?

A colour-shade generator takes one base colour and produces a graded ramp of lighter (tints) and darker (shades) variants. The output is the kind of swatch table you'd find in a design system like Tailwind or Material - a numbered scale (50, 100, 200, …, 900, 950) where each step adjusts lightness while keeping the hue. Designers use these ramps to build text/background hierarchies, hover states, disabled states, and chart palettes from a single brand colour.

Quand l'utiliser

Building a design system from a single brand colour, generating hover/active variants of a primary colour, creating a consistent set of text and background greys, populating Tailwind config with a custom palette, sketching chart series colours that step evenly, and giving developers a default ramp before a designer commits time to hand-tuning each swatch.

Erreurs courantes

Using a 50 or 950 swatch for text without contrast-checking - they often fail WCAG against tinted backgrounds. Treating the auto-generated ramp as final - it's a starting point; the 300-700 range usually wants hand-tuning. Picking a base colour that's already very dark or very light - the ramp will compress at one end, making half the steps indistinguishable.

FAQ

What's the difference between a shade, a tint and a tone?: A shade adds black to a base colour (darker, same hue). A tint adds white (lighter, same hue). A tone adds grey (less saturated, same hue and lightness). This generator emits shades and tints because that's what design systems use - a tone ramp is rarely what people search for.
Why a 50/100…950 scale?: It matches Tailwind CSS and most design tokens, where 500 is roughly the base, 50 is near-white, and 950 is near-black. Using the same numbering means anyone reading your design tokens immediately understands the relative weight. Material uses 50/100/200…900; Tailwind extends that with 950 for a deeper black.
Does the ramp guarantee perceptually-uniform steps?: No - this generator interpolates in HSL, which is faster and matches how CSS works natively, but not perceptually uniform. The middle steps (200-700) usually look evenly spaced; the extremes (50, 950) compress visually. For a perceptually-uniform ramp, generate in OKLCH or LCH - newer design tokens (Tailwind v4, Radix Colors) do this for the same reason.
How do I export the ramp as CSS variables?: Click 'Copy as CSS'. The output is a block of `--brand-50: #...; --brand-100: #...;` lines you can paste into your `:root` or a Tailwind config. Rename the prefix in the input to match your token namespace (`--primary`, `--accent`, etc.) before copying.
Will the 500 shade exactly match my input?: Yes - the 500 swatch is your input colour unchanged. The lighter steps (50-400) are progressive mixes toward white, the darker steps (600-950) toward black. If you pick a very dark or very light base, the ramp can look lopsided - in that case adjust the base hex closer to a 50% lightness and re-run.