Tailwind Colors

Generate a full Tailwind 50–950 scale from any base color and copy the config.

Base color

Name

tailwind.config.js

colors: {
  brand: {
    50: '#f2f4fd',
    100: '#e5e9fb',
    200: '#bec9f9',
    300: '#94a6f5',
    400: '#607bf0',
    500: '#3254ec',
    600: '#153ae0',
    700: '#112fb6',
    800: '#0b2599',
    900: '#091f81',
    950: '#061351',
  },
},

CSS variables

:root {
  --brand-50: #f2f4fd;
  --brand-100: #e5e9fb;
  --brand-200: #bec9f9;
  --brand-300: #94a6f5;
  --brand-400: #607bf0;
  --brand-500: #3254ec;
  --brand-600: #153ae0;
  --brand-700: #112fb6;
  --brand-800: #0b2599;
  --brand-900: #091f81;
  --brand-950: #061351;
}