Tailwind CSS テーマカラー設定生成
ローカル処理1つの基準色から3〜11段階（100〜900番台）のTailwind設定オブジェクトを自動生成します。
使い方と処理基準
1つの基準色から3〜11段階（100〜900番台）のTailwind設定オブジェクトを自動生成します。
ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。
処理制限
- 最大入力文字数: 100,000文字
名前と基準色、段階数（3〜11）を決めると、基準色の色相・彩度はそのままに明度を95%から10%まで均等に分けた色を100・200・300…の名前で作ります。
基準色そのものは段階に入りません。必要なら最も近い段階をその色に置き換えて使ってください。
できること
- 明度の段階
- 明るい100から暗い最後の段階まで明度を均等に分けます。
- 設定コード
- colors: { 'brand': { '100': … } }の形でそのまま貼れます。
Tailwind CSS テーマカラー設定生成の使い方
- 1名前を決めるbrand・primaryなどの色名を入れます。
- 2色・段階数を決める基準色と段階数を選びます。
- 3コードをコピーtailwind.config.jsのtheme.extendに貼ります。
活用例
brand、5段階
入力: brand、#3366cc、5
結果: '100': '#ebf0fa', '200': '#94afe4', '300': '#3d6ecf', '400': '#204080', '500': '#0a1429'
主な利用シーン
- ブランドカラー1つからTailwindの色段階をすばやく作るとき
- デザインシステムの明度段階のたたき台を作るとき
よくある質問 (FAQ)
Tailwind標準パレットのように50〜950にできますか？
段階名は100から100ずつ増えます。11段階なら100〜1100になるので、必要なら名前だけ50・100…950に変えてください。