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.

Gerador de tons de cor

Gere 10 tons e 10 matizes de qualquer cor - pronto em lista hex ou variáveis CSS.

Roda no seu navegador

Digite um hex; receba uma rampa de 21 passos. Os matizes (base misturada com branco) sobem à esquerda, os tons (misturados com preto) descem à direita, e a base fica no meio. A saída segue a escala 50/100/200…900/950 que Tailwind, Material e a maioria dos design systems modernos usam. Clique numa amostra para copiar o hex, ou exporte toda a rampa como propriedades CSS.

Cor base

Prefixo variável CSS

Rampa de tons

Clique numa amostra para copiar o hex.

Propriedades CSS personalizadas

--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;

Como usar

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.

O que é?

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.

Quando usar

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.

Erros comuns

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.