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;