Tailwindカラースケール生成（50〜950の11段階）
基準色を1色選ぶだけで、Tailwind CSS のように 50・100・200…900・950 の11段階に明度を振ったカラースケールを作れます。CSS変数、Tailwind v4 の @theme、v3 の tailwind.config.js 形式でそのままコピーできます。ブラウザ内で処理され、サーバーには送信されません。色相の関係から配色を作るなら 配色パレットジェネレーター、色の形式変換は カラーコード変換 をお使いください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
カラースケール
使い方
- カラーピッカーかHEX欄で基準色を決め、色名を入力します。
- 11段階のスケールが表示されます。色をクリックするとHEXをコピーできます。
- 出力形式（CSS変数・Tailwind v4・Tailwind v3）を選んでコピーします。
注意事項
- 色相と彩度は基準色のまま、HSLの明度だけを段階ごとの固定値に振って計算しています。Tailwind CSS 公式のパレットとは一致しません。
- HSLの明度は見た目の明るさと一致しないため、黄色や緑は同じ段階でも青や紫より明るく見えます。文字色に使う前にコントラストを確認してください。
- 基準色を最も近い段階にそのまま配置する設定では、その段階だけ入力どおりのHEXになり、前後の段階との明度差が不揃いになることがあります。
- 色名は英小文字・数字・ハイフンに自動で整形されます。
用語解説
カラースケール
1つの色相を明るい色から暗い色まで段階的に並べたものです。背景は50〜100、ボーダーは200〜300、文字は700〜900のように使い分けます。
HSLの明度
色の明るさを0〜100%で表す値です。0%で黒、100%で白になり、50%付近が最も鮮やかな色です。
@theme
Tailwind CSS v4 でデザイントークンを定義するCSSのディレクティブです。--color-名前-段階 の形で書くと、bg-名前-500 のようなユーティリティが使えます。
よくある質問
生成されるスケールはTailwind公式のパレットと同じですか？
同じではありません。基準色の色相と彩度を保ったまま、HSLの明度を50〜950の各段階に固定値で割り当てる方式です。公式パレットは色ごとに手作業で調整されているため、近い雰囲気にはなりますが数値は一致しません。
基準色はどの段階に入りますか？
「基準色を最も近い段階にそのまま配置する」をオンにすると、基準色のHSL明度に最も近い段階が入力どおりのHEXになります。オフにすると、基準色も固定の明度で計算し直します。
Tailwind v4 と v3 の出力はどう使い分けますか？
v4 はCSSファイルに @theme { --color-名前-500: …; } を貼り付けます。v3 は tailwind.config.js の theme.extend.colors に貼り付けます。CSS変数形式は Tailwind を使わないプロジェクトでも使えます。
同じ段階でも黄色だけ明るく見えるのはなぜですか？
HSLの明度は人の目に見える明るさとは一致しないためです。黄色や緑は同じ明度でも青や紫より明るく見えます。文字色に使う場合はコントラスト比を確認してください。
このページをシェア