Tailwind Colors Export

Convert your palette into a tailwind.config.js color theme and CSS variables.

Colors
primary
50
100
200
300
400
500
600
700
800
900
950
accent
50
100
200
300
400
500
600
700
800
900
950
tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      'primary': {
        '50': '#ffffff',
        '100': '#dce2ff',
        '200': '#bbc4fe',
        '300': '#9ba6fb',
        '400': '#7d87f7',
        '500': '#6366f1',
        '600': '#4b53d2',
        '700': '#343fb4',
        '800': '#1e2c97',
        '900': '#0a187a',
        '950': '#00005e'
      },
      'accent': {
        '50': '#ffffff',
        '100': '#ffddea',
        '200': '#ffbbd5',
        '300': '#fb98c1',
        '400': '#f573ad',
        '500': '#ec4899',
        '600': '#cb387b',
        '700': '#aa295f',
        '800': '#8a1a45',
        '900': '#6b0b2e',
        '950': '#4d001a'
      }
      }
    }
  }
}
CSS Variables
:root {
  --color-primary-50: #ffffff;
  --color-primary-100: #dce2ff;
  --color-primary-200: #bbc4fe;
  --color-primary-300: #9ba6fb;
  --color-primary-400: #7d87f7;
  --color-primary-500: #6366f1;
  --color-primary-600: #4b53d2;
  --color-primary-700: #343fb4;
  --color-primary-800: #1e2c97;
  --color-primary-900: #0a187a;
  --color-primary-950: #00005e;
  --color-accent-50: #ffffff;
  --color-accent-100: #ffddea;
  --color-accent-200: #ffbbd5;
  --color-accent-300: #fb98c1;
  --color-accent-400: #f573ad;
  --color-accent-500: #ec4899;
  --color-accent-600: #cb387b;
  --color-accent-700: #aa295f;
  --color-accent-800: #8a1a45;
  --color-accent-900: #6b0b2e;
  --color-accent-950: #4d001a;
}
Ad