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.

HEX Color

Palette Name

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	HEX	RGB	HSL	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.