TAILWIND COLOR PALETTE

One hex.
A complete scale.

Paste your brand color. Get a production-ready 50–950 Tailwind palette with real component previews and instant export.

50
#e9eafb
100
#d4d4f7
200
#a5a7f3
300
#7274f3
400
#4346ef
500
BASE
#1418eb
600
#1114c5
700
#0e10a0
800
#0b0c7a
900
#070954
950
#050638
HOW IT RENDERS

Every preview updates live with your scale.

COMPONENTS
New
Your palette was saved.
FORM ELEMENTS
Toggle on
Checked
DASHBOARD CARD
Monthly RevenueLive
$24,480
+12.4% FROM LAST MONTH
STATUS & ALERTS
Your palette was saved.
Scale generated from #6366F1
3 shades updated.
FULL SCALE
50
#e9eafb—
100
#d4d4f7—
200
#a5a7f3—
300
#7274f3—
400
#4346efAA
500
BASE
#1418ebAAA
600
#1114c5AAA
700
#0e10a0AAA
800
#0b0c7aAAA
900
#070954AAA
950
#050638AAA
tailwind.config.js
// tailwind.config.js — generated by 11 Shades of Yay
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50  : '#e9eafb',
          100 : '#d4d4f7',
          200 : '#a5a7f3',
          300 : '#7274f3',
          400 : '#4346ef',
          500 : '#1418eb',
          600 : '#1114c5',
          700 : '#0e10a0',
          800 : '#0b0c7a',
          900 : '#070954',
          950 : '#050638',
        },
      },
    },
  },
}
EXPORT

Ready to ship.

Tailwind Config
tailwind.config.js with full 50–950 scale
Copy →
CSS Variables
:root with --color-brand-50 through --color-brand-950
Copy →