Color Shades Generator

Generate a full 11-step shade palette from any base color. Copy as Tailwind config or CSS custom properties.

Base Color

50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)

100#e2ecfergb(226, 236, 254)hsl(217, 91%, 94%)

200#bbd3fcrgb(187, 211, 252)hsl(217, 91%, 86%)

300#7babf9rgb(123, 171, 249)hsl(217, 91%, 73%)

400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)

500#0b64f4rgb(11, 100, 244)hsl(217, 91%, 50%)

600#0950c3rgb(9, 80, 195)hsl(217, 91%, 40%)

700#073c92rgb(7, 60, 146)hsl(217, 91%, 30%)

800#052c6brgb(5, 44, 107)hsl(217, 91%, 22%)

900#031c44rgb(3, 28, 68)hsl(217, 91%, 14%)

950#021027rgb(2, 16, 39)hsl(217, 91%, 8%)

colors: {
  custom: {
    50: '#f0f6fe',
    100: '#e2ecfe',
    200: '#bbd3fc',
    300: '#7babf9',
    400: '#3c83f6',
    500: '#0b64f4',
    600: '#0950c3',
    700: '#073c92',
    800: '#052c6b',
    900: '#031c44',
    950: '#021027',
  }
}