Skip to main content
Back to all tools

Tailwind Color Generator

Generate a Tailwind CSS-compatible color palette from any base color.

Color Scale

Scale Details

50
100
200
300
400
500
600
700
800
900
950

Tailwind Config

js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          '50': '#f1f1fe',
          '100': '#dedffc',
          '200': '#b9baf9',
          '300': '#8587f4',
          '400': '#4346ef',
          '500': '#1317dd',
          '600': '#0b0eb7',
          '700': '#080b91',
          '800': '#06086f',
          '900': '#04064d',
          '950': '#030430'
        },
      },
    },
  },
};

CSS Variables

css
:root {
  --brand-50: #f1f1fe;
  --brand-100: #dedffc;
  --brand-200: #b9baf9;
  --brand-300: #8587f4;
  --brand-400: #4346ef;
  --brand-500: #1317dd;
  --brand-600: #0b0eb7;
  --brand-700: #080b91;
  --brand-800: #06086f;
  --brand-900: #04064d;
  --brand-950: #030430;
}