カラーパレット生成（Tailwind風）
1色からTailwind CSS風の50〜950（11段階）の濃淡を作ります。OKLCHで明るさをそろえ、コントラスト比とCSS変数・Tailwind v3/v4の設定を出力します。
半角英小文字・数字・ハイフン。bg-brand-500 のようなクラス名になります。
色を入力すると 50〜950 の 11 段を作ります。
各段の値とコントラスト比
| 段 | HEX | RGB | OKLCH | 白に対して | 黒に対して |
|---|
★ は入力した色そのものです。✓ は通常の文字で WCAG AA（4.5:1）を満たす組み合わせです。
出力
補足
- 明るさは OKLCH の L（知覚的な明るさ）で段ごとに決めています。HSL と違い、色相が違っても同じ段ならほぼ同じ明るさに見えます。 入力した色は、明るさが最も近い段にそのまま入ります（500 になるとは限りません）。
- 色相は入力色のまま固定し、鮮やかさは明るい段・暗い段ほど控えめにしています。画面に出せない（sRGB の外の）色は、明るさと色相を保ったまま鮮やかさだけを下げています。
- Tailwind の既定パレット（blue など）を再現するものではありません。段ごとの明るさの目安だけを参考にした独自の計算です。
-
Tailwind CSS v3 の設定に OKLCH を書くと、
bg-brand-500/50のような不透明度の指定が効かないことがあります。v3 では HEX を選ぶのが確実です。 - コントラスト比は WCAG 2.x の式で計算しています。4.5:1 以上で通常の文字の AA、3:1 以上で大きい文字の AA を満たします。
よくある質問
入力した色が 500 になりません。
仕様です。入力した色は、明るさ（OKLCH の L）が最も近い段にそのまま入ります。明るい黄色なら 200 付近、濃い紺なら 800 付近に入り、そこを基準に前後の段を作ります。無理に 500 に置くと、明るい段と暗い段の間隔が偏るためです。
Tailwind の既定の blue などと同じ色になりますか？
なりません。段ごとの明るさの目安だけを参考にした独自の計算で、既定パレットの値を再現するものではありません。既定の色をそのまま使いたい場合は Tailwind の公式ドキュメントの値を使ってください。
なぜ HSL ではなく OKLCH で計算するのですか？
色相が違っても同じ段で明るさをそろえるためです。HSL の明度は同じ値でも黄色は明るく青は暗く見えますが、OKLCH の L は人の目の明るさに近いため、パレットどうしを並べても段の明るさがそろいます。
Tailwind CSS v3 と v4 のどちらの形式を使えばよいですか？
使っているバージョンに合わせてください。v4 は CSS の @theme に --color-名前-段 を書き、v3 は tailwind.config.js の theme.extend.colors に書きます。v3 で OKLCH を選ぶと不透明度の指定（/50 など）が効かないことがあるため、v3 では HEX が確実です。
コントラスト比の ✓ は何を表していますか？
白または黒の上に置いたとき（あるいは白・黒の文字を乗せたとき）、WCAG 2.x の AA 基準（通常の文字で 4.5:1 以上）を満たすことを示します。大きい文字なら 3:1 以上で AA です。別の背景色との比は「カラーコード変換」で確かめられます。