TailwindCSS パレット生成

TailwindCSSカラーパレット生成ツールは、任意の16進数カラーを入力すると50から950まで11段階の完全なパレットを生成し、tailwind.config.tsにそのまま貼り付けられる設定コードを出力します。入力カラーをTailwindの組み込みパレットと比較して、既存の色が十分近ければそちらを使えることも教えてくれます。

出力の例

#3b82f6（ミッドブルー）を入力すると、ツールは次のコードを生成します。

colors: {
  primary: {
    '50': '#eff6ff',
    '100': '#dbeafe',
    '200': '#bfdbfe',
    '300': '#93c5fd',
    '400': '#60a5fa',
    '500': '#3b82f6',
    '600': '#2563eb',
    '700': '#1d4ed8',
    '800': '#1e40af',
    '900': '#1e3a8a',
    '950': '#172554',
  }
}

500シェードが入力カラーに最も近い値です。50〜400は背景・ホバー状態・ボーダー向けの明るいバリエーション、600〜950はテキスト・アクティブ状態・深い影向けの暗いバリエーションです。

設定コードをどこに置くか

生成したオブジェクトをtailwind.config.tsのtheme.extend.colorsに貼り付けると、Tailwindの組み込みカラーを残したまま新しいパレットを追加できます。extendなしのtheme.colorsに置いた場合は組み込みカラーがすべて置き換わり、gray・slate・white・blackなどのユーティリティクラスも失われます。

カラー名マッチャーが組み込みカラーを提案するとき

ツールはTailwindの組み込みパレットと入力カラーを比較し、最も近い一致（例：「最も近い一致：blue-500」）を表示します。距離が小さい場合は、カスタムシェードを生成する代わりに組み込みの名前をそのまま設定に使う方が、メンテナンスするパレットが1つ減るためシンプルです。

入力形式

16進数の値のみ受け付けます。#プレフィックスは省略可能です。3桁の省略形（#f00）も使用でき、6桁に展開されます。CSSの色名（red、cornflowerblue）やHSL・RGB形式は受け付けず、バリデーションエラーになります。