50 to 950 Ramp · Perceptual Luminance · Tailwind Ready

Tailwind Color Shades Generator

Create complete, harmonious 11-step color scales tailored for Tailwind CSS and design systems. Export config code or copy swatches with a single click.

Base Color:

Name:

Presets:

#f2f2fcrgb(242, 242, 252)

100

#dcddf9rgb(220, 221, 249)

200

#aeaff4rgb(174, 175, 244)

300

#7a7cf0rgb(122, 124, 240)

400

#3a3deergb(58, 61, 238)

500

#6366f1rgb(99, 102, 241)

600

#1114c5rgb(17, 20, 197)

700

#111397rgb(17, 19, 151)

800

#0f106crgb(15, 16, 108)

900

#0b0c41rgb(11, 12, 65)

950

#080826rgb(8, 8, 38)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
      50: '#f2f2fc',
      100: '#dcddf9',
      200: '#aeaff4',
      300: '#7a7cf0',
      400: '#3a3dee',
      500: '#6366f1',
      600: '#1114c5',
      700: '#111397',
      800: '#0f106c',
      900: '#0b0c41',
      950: '#080826',
        },
      },
    },
  },
};

Building Cohesive UI Color Systems

The 50 to 950 Lightness Scale

In Tailwind CSS and modern UI libraries, color scales span from 50 (soft tinted backgrounds) to 950 (deep high-contrast typography in dark mode).

Linear interpolation of RGB channels often yields dull, muddy mid-tones. Our generator modulates perceptual saturation and lightness along an S-curve, keeping 50-200 tints crisp and 700-950 shades richly saturated.

Integrating Custom Colors into Tailwind Config

Copying the generated config into tailwind.config.js under theme.extend.colors unlocks all native utility classes:

bg-brand-500 for primary call-to-action buttons.
text-brand-900 dark:text-brand-100 for accessible headings.
border-brand-200 dark:border-brand-800 for subtle separators.