Tailwind CSS为每个颜色系列使用11步数字刻度(50、100-900、950),其中500通常是基础色调。
在OKLCH色彩空间中生成刻度会产生感知均匀的步骤,这意味着每个色调在人眼看来都是等距的。
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;