Tints & Shades Generator
Generate a full 11-step tonal scale from any color — tints (50–400), the base (500), and shades (600–950). Export as CSS variables, Tailwind config, Sass, or JSON.
Presets
#F7F7F8
rgb(247, 247, 248)
hsl(221, 7%, 97%)
W 1.1:1B 19.6:1
#E9EBEE
rgb(233, 235, 238)
hsl(221, 15%, 92%)
W 1.2:1B 17.6:1
#C0CAE0
rgb(192, 202, 224)
hsl(221, 34%, 82%)
W 1.6:1B 12.8:1
#829EDC
rgb(130, 158, 220)
hsl(221, 56%, 68%)
W 2.7:1B 7.9:1
#4275E4
rgb(66, 117, 228)
hsl(221, 75%, 58%)
W 4.3:1B 4.9:1
#2463EB
rgb(36, 99, 235)
hsl(221, 83%, 53%)
W 5.2:1B 4.1:1
#1857DE
rgb(24, 87, 222)
hsl(221, 81%, 48%)
W 6.1:1B 3.5:1
#1744A5
rgb(23, 68, 165)
hsl(221, 76%, 37%)
W 8.7:1B 2.4:1
#122C64
rgb(18, 44, 100)
hsl(221, 70%, 23%)
W 13.4:1B 1.6:1
#0B1731
rgb(11, 23, 49)
hsl(221, 64%, 12%)
W 17.8:1B 1.2:1
#070E1D
rgb(7, 14, 29)
hsl(221, 62%, 7%)
W 19.3:1B 1.1:1
| Step | Preview | HEX | Contrast | ||
|---|---|---|---|---|---|
| 50 | #F7F7F8 | 247, 247, 248 | 221°, 7%, 97% | W 1.1:1B 19.6:1 | |
| 100 | #E9EBEE | 233, 235, 238 | 221°, 15%, 92% | W 1.2:1B 17.6:1 | |
| 200 | #C0CAE0 | 192, 202, 224 | 221°, 34%, 82% | W 1.6:1B 12.8:1 | |
| 300 | #829EDC | 130, 158, 220 | 221°, 56%, 68% | W 2.7:1B 7.9:1 | |
| 400 | #4275E4 | 66, 117, 228 | 221°, 75%, 58% | W 4.3:1B 4.9:1 | |
| 500base | #2463EB | 36, 99, 235 | 221°, 83%, 53% | W 5.2:1B 4.1:1 | |
| 600 | #1857DE | 24, 87, 222 | 221°, 81%, 48% | W 6.1:1B 3.5:1 | |
| 700 | #1744A5 | 23, 68, 165 | 221°, 76%, 37% | W 8.7:1B 2.4:1 | |
| 800 | #122C64 | 18, 44, 100 | 221°, 70%, 23% | W 13.4:1B 1.6:1 | |
| 900 | #0B1731 | 11, 23, 49 | 221°, 64%, 12% | W 17.8:1B 1.2:1 | |
| 950 | #070E1D | 7, 14, 29 | 221°, 62%, 7% | W 19.3:1B 1.1:1 |
Export
:root {
--color-primary-50: #F7F7F8;
--color-primary-100: #E9EBEE;
--color-primary-200: #C0CAE0;
--color-primary-300: #829EDC;
--color-primary-400: #4275E4;
--color-primary-500: #2463EB;
--color-primary-600: #1857DE;
--color-primary-700: #1744A5;
--color-primary-800: #122C64;
--color-primary-900: #0B1731;
--color-primary-950: #070E1D;
}How the scale is generated
Steps 50–400 (Tints)
The base color's hue is preserved. Lightness is interpolated upward toward 97% and saturation is reduced to create clean, light tints suitable for backgrounds and subtle UI surfaces.
Step 500 (Base)
The exact color you entered, used as the identity anchor for the scale. Step 500 is typically the primary action color in design systems.
Steps 600–950 (Shades)
Lightness is interpolated downward toward 7% while keeping the hue consistent. Darker steps are ideal for text, borders, and hover states.
Contrast badges show WCAG ratios versus white (W) and black (B). Green = AA compliant (≥4.5:1 for normal text), amber = large text only (≥3:1), grey = fails AA.