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.

Color Shade Generator

Generate 10 shades and 10 tints of any colour - ready as a hex list or CSS variables.

Runs in your browser

Type a hex; get a 21-step ramp. Tints (the base mixed toward white) climb on the left, shades (mixed toward black) descend on the right, and the base sits in the middle. The output matches the 50/100/200…900/950 scale that Tailwind, Material and most modern design systems use, so the generated swatches drop straight into your tokens. Copy a single swatch with one click, or export the whole ramp as a block of CSS custom properties.

Base colour

CSS variable prefix

Shade ramp

Click any swatch to copy its hex.

CSS custom properties

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

How to use it

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.

What is it?

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.

When to use it

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.

Common mistakes

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.