Tailwind Palette Generator

Generate Tailwind CSS compatible color scales from any base color.

Base Color (will be used as 500)

Color Name

Generated Palette

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': {
          '50': '#f3f3fb',
          '100': '#e6e6f9',
          '200': '#c1c2f6',
          '300': '#9698f3',
          '400': '#5f62f1',
          '500': '#1418eb',
          '600': '#0d10d9',
          '700': '#0609c1',
          '800': '#05079e',
          '900': '#040677',
          '950': '#000247',
        },
      },
    },
  },
}

CSS Variables

:root {
  --primary-50: #f3f3fb;
  --primary-100: #e6e6f9;
  --primary-200: #c1c2f6;
  --primary-300: #9698f3;
  --primary-400: #5f62f1;
  --primary-500: #1418eb;
  --primary-600: #0d10d9;
  --primary-700: #0609c1;
  --primary-800: #05079e;
  --primary-900: #040677;
  --primary-950: #000247;
}

Preview Components

Buttons

Badges

DefaultSolidOutline

Alert

Alert Title

This is an example alert message using your color palette.

Card Header

Card content goes here.