Tailwind Palette Creator

Create custom Tailwind color palettes with scale generation

Base Color

Color

Color Name

Color Scale

#ebf3fe

100

#d8e6fd

200

#b1cdfb

300

#89b4fa

400

#629bf8

500

#035206

600

#2e65bf

700

#214889

800

#142b52

900

#070e1b

950

#000000

Presets

Live Preview

Preview

200

400

500

600

800

950

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        'blue': {
          50: '#ebf3fe',
          100: '#d8e6fd',
          200: '#b1cdfb',
          300: '#89b4fa',
          400: '#629bf8',
          500: '#035206',
          600: '#2e65bf',
          700: '#214889',
          800: '#142b52',
          900: '#070e1b',
          950: '#000000',
        },
      },
    },
  },
}

Generated CSS Classes

.bg-blue-50 { background-color: #ebf3fe; }
.bg-blue-100 { background-color: #d8e6fd; }
.bg-blue-200 { background-color: #b1cdfb; }
.bg-blue-300 { background-color: #89b4fa; }
.bg-blue-400 { background-color: #629bf8; }
.bg-blue-500 { background-color: #035206; }
.bg-blue-600 { background-color: #2e65bf; }
.bg-blue-700 { background-color: #214889; }
.bg-blue-800 { background-color: #142b52; }
.bg-blue-900 { background-color: #070e1b; }
.bg-blue-950 { background-color: #000000; }