CSS Generators·free · no signup

Tailwind Config Generator

Generate a tailwind.config color scale (50–950) from any base color — drop it straight into theme.extend.colors.

Base color
#
Color key
-500
tailwind.config.js
tailwind.config.js
colors: {
  brand: {
    50: '#F3F0FF',
    100: '#E2DBFF',
    200: '#C2B3FF',
    300: '#9980FF',
    400: '#6C47FF',
    500: '#3F0FFF',
    600: '#2E00E6',
    700: '#2600BD',
    800: '#1D008F',
    900: '#140066',
    950: '#0C003D',
  },
}