概要 カラースケール生成
任意の色から 50–950 の色階と CSS を出力
使い方
1 つのベースカラーから 50〜950 の完全なスケールを生成し、貼り付け可能な CSS と Tailwind の出力を得られます。
限界
段階は固定の明度間隔で生成され、彩度が高い基準色は両端でクリップされます。
カラースケール生成
50–950 のスケールが必要な理由
1 つの色相で背景・境界線・文字・状態をまかなえるようになります。50 が最も淡い色、950 が最も深い色で、500 がブランドカラーの中心です。
均等なステップは保守しやすく、隣り合う値の差がどの画面でも予測しやすくなります。
ステップの作り方
各ステップは OKLCH の明度を目標にするため、暗部でつぶれず知覚的に均等になります。両端では彩度を下げ、淡色は清潔に、濃色は豊かに見せます。
よくある質問
500 が元の色と違うのはなぜ？
500 はスケール中央で、ボタンやリンクの既定値として最も安全です。入力色が明るい／暗い場合は近いステップに配置されます。
書き出した CSS はそのまま使えますか？
はい。--brand-50 から --brand-950 を定義します。貼り付ける前に接頭辞を自分の設計に合わせてください。
グレーでも使えますか？
はい。低彩度の色は色相の偏りがほとんどない中性ランプになり、文字や境界線、無効状態に適します。
スケールのコントラスト曲線
「藍 #104E8B」を例に、50–950 の 11 段を白文字・黒文字それぞれと比較した値です。緑は 4.5:1 以上で、本文を載せられます。
50
白文字 1.1
黒文字 17.2
100
白文字 1.2
黒文字 15.9
200
白文字 1.4
黒文字 13.3
300
白文字 1.8
黒文字 10.7
400
白文字 2.3
黒文字 8.1
500
白文字 3.4
黒文字 5.5
600
白文字 4.8
黒文字 4.0
700
白文字 6.7
黒文字 2.8
800
白文字 9.4
黒文字 2.0
900
白文字 13.0
黒文字 1.5
950
白文字 16.2
黒文字 1.2