Shades & tints
A full tonal ramp from any color, ready to paste into a design system.
Tonal ramp
Contrast against black and white
| Step | Hex | vs white | vs black | Safe for body text on |
|---|---|---|---|---|
| 50 | #fdf5f2 | 1.08 | 19.52 | black |
| 100 | #fbebe5 | 1.16 | 18.12 | black |
| 200 | #f5d0c2 | 1.43 | 14.68 | black |
| 300 | #eeb19b | 1.84 | 11.4 | black |
| 400 | #e68c6b | 2.52 | 8.33 | black |
| 500 | #de663b | 3.46 | 6.07 | black |
| 600 | #c44d21 | 4.74 | 4.43 | white |
| 700 | #9d3d1a | 6.74 | 3.12 | white |
| 800 | #762e14 | 9.67 | 2.17 | white |
| 900 | #4f1f0d | 13.69 | 1.53 | white |
| 950 | #301308 | 17.18 | 1.22 | white |
CSS custom properties
:root {
--brand-50: #fdf5f2;
--brand-100: #fbebe5;
--brand-200: #f5d0c2;
--brand-300: #eeb19b;
--brand-400: #e68c6b;
--brand-500: #de663b;
--brand-600: #c44d21;
--brand-700: #9d3d1a;
--brand-800: #762e14;
--brand-900: #4f1f0d;
--brand-950: #301308;
}Tailwind config
brand: {
50: '#fdf5f2',
100: '#fbebe5',
200: '#f5d0c2',
300: '#eeb19b',
400: '#e68c6b',
500: '#de663b',
600: '#c44d21',
700: '#9d3d1a',
800: '#762e14',
900: '#4f1f0d',
950: '#301308',
}How it works
A tonal ramp takes one hue and generates a series of lightness steps, giving you a full scale from a near-white tint to a near-black shade — the backbone of any design system.
The 50–950 numbering
The convention popularised by Material Design and Tailwind: 50 is lightest, 500 is the base, 950 is darkest. Numbering rather than naming means adding a step later does not force a rename, and it makes “one step darker” an obvious operation.
Why lightness alone is not quite enough
This ramp holds hue and saturation constant and varies lightness, which is simple and predictable. Perceptually, though, equal HSL lightness steps do not look equally spaced — blues read as darker than yellows at the same value. Ramps built in a perceptual space such as OKLCH handle that better; the trade-off is that they are harder to reason about by hand.
Check contrast before you commit
The table above shows which steps are safe for body text on white and on black. A common outcome is that only steps 600 and above work on white — useful to know before building an interface around step 400.