Tint and Shade Generator
Enter one colour and get a complete palette ramp: shades mixed toward black, tints mixed toward white, and tones mixed toward grey. Each swatch shows its hex, RGB and HSL values plus which of black or white text has more contrast on it and whether that reaches WCAG AAA. Export the ramp as CSS custom properties, SCSS variables, JSON or a plain hex list, numbered 50/100/200 the way most design systems label a scale.
Lightest tint on the left through to darkest shade on the right, with the base colour in the middle at step 500 — the same direction Tailwind and Material number their palettes.
| Swatch | Step | Mix | Hex | RGB | HSL | Best text colour |
|---|---|---|---|---|---|---|
| 50 | 83% | rgb(221, 230, 247) | hsl(219, 62%, 92%) | Black — 16.74:1 AAA | ||
| 100 | 67% | rgb(187, 204, 238) | hsl(220, 60%, 83%) | Black — 12.98:1 AAA | ||
| 200 | 50% | rgb(153, 179, 230) | hsl(220, 61%, 75%) | Black — 9.95:1 AAA | ||
| 300 | 33% | rgb(119, 153, 221) | hsl(220, 60%, 67%) | Black — 7.38:1 AAA | ||
| 400 | 17% | rgb(85, 128, 213) | hsl(220, 60%, 58%) | Black — 5.43:1 AA | ||
| 500 | 0% | rgb(51, 102, 204) | hsl(220, 60%, 50%) | White — 5.37:1 AA | ||
| 600 | 17% | rgb(43, 85, 170) | hsl(220, 60%, 42%) | White — 7.04:1 AAA | ||
| 700 | 33% | rgb(34, 68, 136) | hsl(220, 60%, 33%) | White — 9.33:1 AAA | ||
| 800 | 50% | rgb(26, 51, 102) | hsl(220, 59%, 25%) | White — 12.29:1 AAA | ||
| 900 | 67% | rgb(17, 34, 68) | hsl(220, 60%, 17%) | White — 15.72:1 AAA | ||
| 950 | 83% | rgb(9, 17, 34) | hsl(221, 58%, 8%) | White — 18.84:1 AAA |
Every swatch meets WCAG AA against either black or white text — even the worst possible colour reaches 4.6:1 against one of them — so the useful line is AAA at 7:1, marked in the last column.
:root {
--brand-50: #dde6f7;
--brand-100: #bbccee;
--brand-200: #99b3e6;
--brand-300: #7799dd;
--brand-400: #5580d5;
--brand-500: #3366cc;
--brand-600: #2b55aa;
--brand-700: #224488;
--brand-800: #1a3366;
--brand-900: #112244;
--brand-950: #091122;
}Steps run 50 (lightest) to 950 (darkest) with the base colour at 500, matching how Tailwind and Material number a palette, so the ramp drops into an existing config without renaming.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint is the colour mixed toward white, a shade is mixed toward black, and a tone is mixed toward mid-grey. Tints and shades change the brightness; tones mute the colour while keeping roughly its brightness.
Why are the swatches numbered 50, 100, 200 and so on?
That is the convention Tailwind, Material and most other design systems use, and the direction matters as much as the numbers: 50 is the lightest step, 950 the darkest, and the base colour sits at 500. Exported that way the ramp drops into an existing config without renaming or reordering anything.
What does the contrast column tell me?
It shows which of black or white text has more contrast on that swatch and the ratio. Every possible colour clears WCAG AA at 4.5:1 against one of the two — even the worst case reaches 4.6:1 — so the meaningful marker is whether the swatch reaches AAA at 7:1.
Why are the colours mixed in sRGB rather than a perceptual colour space?
sRGB is what the hex values in a stylesheet actually mean, so the numbers here match what you compare against the rest of your palette. A perceptual space would give a slightly more even-looking ramp but different values.
How many steps should a palette have?
Five steps in each direction gives an eleven-swatch ramp, which covers the usual needs — background, hover, border, text — without producing neighbours too similar to tell apart.
Related tools
Color Converter (HEX / RGB / HSL / HSV / CMYK)
A color converter for HEX, RGB, HSL, HSV and CMYK, with a built-in WCAG contrast checker.
Color Desaturation Tool
Fade a colour toward grey in even steps, and see how zero saturation differs from a true greyscale conversion.
CSS Gradient Generator
This gradient generator builds linear, radial and conic gradients with a live preview.