Tailwind CSS uses a 11-step numeric scale (50, 100-900, 950) for each color family, with 500 typically being the base shade.
Generating scales in OKLCH color space produces perceptually uniform steps, meaning each shade appears equally spaced to the human eye.
colors: {
brand: {
'50': '#eaf0fa',
'100': '#d2e1f9',
'200': '#9ec1fa',
'300': '#6da2f8',
'400': '#3c83f6',
'500': '#0b64f4',
'600': '#0950c3',
'700': '#073c92',
'800': '#052861',
'900': '#071936',
'950': '#060d19',
},
}--color-brand-50: #eaf0fa; --color-brand-100: #d2e1f9; --color-brand-200: #9ec1fa; --color-brand-300: #6da2f8; --color-brand-400: #3c83f6; --color-brand-500: #0b64f4; --color-brand-600: #0950c3; --color-brand-700: #073c92; --color-brand-800: #052861; --color-brand-900: #071936; --color-brand-950: #060d19;