概要 カラースケール生成
任意の色から 50–950 の色階と CSS を出力
使い方
1 つのベースカラーから 50〜950 の完全なスケールを生成し、貼り付け可能な CSS と Tailwind の出力を得られます。
カラースケール生成
50–950 のスケールが必要な理由
1 つの色相で背景・境界線・文字・状態をまかなえるようになります。50 が最も淡い色、950 が最も深い色で、500 がブランドカラーの中心です。
均等なステップは保守しやすく、隣り合う値の差がどの画面でも予測しやすくなります。
ステップの作り方
各ステップは OKLCH の明度を目標にするため、暗部でつぶれず知覚的に均等になります。両端では彩度を下げ、淡色は清潔に、濃色は豊かに見せます。
よくある質問
500 が元の色と違うのはなぜ？
500 はスケール中央で、ボタンやリンクの既定値として最も安全です。入力色が明るい／暗い場合は近いステップに配置されます。
書き出した CSS はそのまま使えますか？
はい。--brand-50 から --brand-950 を定義します。貼り付ける前に接頭辞を自分の設計に合わせてください。
グレーでも使えますか？
はい。低彩度の色は色相の偏りがほとんどない中性ランプになり、文字や境界線、無効状態に適します。