🎨Free Tool

Tailwind CSS Color Generator

Generate custom Tailwind CSS color scales from any hex color. Pick your base, get a full 50-950 shade palette, and export ready-to-use config.

Enter a hex color or pick a preset

Adjust the shade spread and saturation

Copy the tailwind.config.js snippet

Base Color (500)

Color Name

Presets

100

200

300

400

500

600

700

800

900

950

Saturation Adjust0

Spread50

Closest Tailwind color: blue

blue (Tailwind)brand (yours)

Export

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
      'brand': {
        50: '#f3f5f8',
        100: '#dfe6f3',
        200: '#bacef0',
        300: '#7ca8ee',
        400: '#4083f1',
        500: '#3b82f6',
        600: '#146bfa',
        700: '#0254dc',
        800: '#0341a7',
        900: '#032d70',
        950: '#04193b',
      },
      },
    },
  },
}

Accessibility (WCAG Contrast)

Click "Show" to see which shade combinations meet WCAG AA/AAA for text contrast.

Email Me This Color Palette

Get your generated color scales + Tailwind design system tips.

or use email

Get this + weekly PM tools and templates.