CodeKitHubこのツールとは？
Tailwind CSSは、一般的なUIカラーに任意の値を選ばせる代わりに、固定のデフォルトカラースケールを提供します。amberやslateのような22の名前付きファミリーそれぞれには、50から950まで番号が振られた正確に11のシェードがあり、各シェードにはTailwind自身が文書化した公式のHEX値が1つあり、bg-、text-、border-、ring-のユーティリティ全体で同一に使われます。
このリファレンスは、この完全な公式パレットをローカルに組み込んでいるため、色やクラス名を調べるためにTailwindのドキュメントを開いたり、ビルドを実行したり、見た目を確認するためだけにクラスをPurgeCSSに通したりする必要がありません。HEX検索はRGBユークリッド距離を使って最も近い公式シェードを見つけ、クラス検索は正確です——ここにあるすべての値はTailwindの文書化されたデフォルト値と一致します。
なぜこれを使うのか？
- デザインファイルやスクリーンショットからHEXコードを貼り付けるだけで、それがどの番号のシェードに対応するか推測することなく、即座に最も近いTailwindクラス名を取得できます。
- slate-900やbg-purple-500のようなクラス名を入力するだけで、Tailwindのドキュメントを掘り下げることなく正確なHEXとRGB値を確認できます。
- 22ファミリー×11シェードの完全なグリッドを閲覧して、選ぶ前にシェードを並べて比較できます。
- Tailwindはすべてで同じ数値スケールを使うため、任意のシェードのbg-、text-、border-、ring-バリアントをワンクリックで取得できます。
- 無料・即時・完全ローカル動作——アップロード不要、アカウント不要、ビルド手順不要。
使い方
- HEXコードからクラス名を見つけるには：検索ボックスにHEX値（#の有無を問わず）を入力または貼り付けます——グリッドの上に最も近い公式Tailwindシェードが表示され、完全一致でない場合は色の距離も併せて表示されます。
- クラス名からHEX値を見つけるには：クラスまたはファミリー名を入力します（例：amber-500、bg-blue-600、またはteal単体）——完全一致するとHEX、RGB、すべてのユーティリティバリアントが表示され、ファミリー名だけの場合はグリッドがそのファミリーに絞り込まれます。
- すべてを閲覧するには：検索ボックスを空欄のままにして、グリッド内の任意のスウォッチをクリックします——その詳細が上のパネルに表示され、HEXコードが自動的にコピーされます。
- 詳細パネル内のbg-/text-/border-/ring-バリアントボタンのいずれかをクリックすると、その正確なクラス名がコピーされます。
例
入力
#c4b5fd出力
violet-300 — 完全一致、#C4B5FD、rgb(196, 181, 253)このHEXはTailwind自身が文書化したデフォルト値の1つなので、距離は0であり、近似ではなく完全一致となります。
よくある質問
これらはTailwind CSSの公式デフォルトカラーですか？
はい——242個すべてのHEX値（22ファミリー×11シェード）は、Tailwind自身が文書化したデフォルトパレットから来ています。Tailwind v4は内部的に色をOKLCHとして表現しますが、同じデフォルトパレットとその文書化されたHEX相当値はv3から変わっていないため、これらの値はどちらのバージョンでも現行のものです。
HEX検索が完全一致でない場合、それはどういう意味ですか？
貼り付けたHEXコードがTailwindの242個のデフォルト値のいずれでもない場合（例えば独自のブランドカラー）、ツールはRGB距離によって最も近い公式シェードを表示し、「最も近い一致」というラベルと距離を表示します——入力とピクセル単位で完全に同一ではなく、あくまで最も近いTailwindのデフォルト値です。
なぜbg-、text-、border-、ring-はすべて同じ番号を使うのですか？
Tailwindはすべてのユーティリティカテゴリで1つの共通カラースケールを適用するため、bg-amber-500、text-amber-500、border-amber-500、ring-amber-500はすべて同じ基礎となるHEX値が異なるCSSプロパティに適用されたものです。そのため、詳細パネルは調べたいどのシェードについても、この4つのバリアントをまとめて表示します。
シェード番号なしで「blue」のようなファミリーグループ全体を検索できますか？
はい——ファミリー名のみ（番号なし）を入力すると、グリッドがそのファミリーの11シェードすべてに絞り込まれ、特定のシェードを選ぶ前に並べて比較できます。
自分の設定で定義したTailwindのカスタムテーマカラーもカバーしていますか？
いいえ——このリファレンスはTailwindの組み込みデフォルトパレットのみをカバーしており、tailwind.config.jsのtheme.extend.colorsブロックやv4の@themeブロックで追加・上書きした色はカバーしていません。プロジェクトでパレットをカスタマイズしている場合、実際にレンダリングされる色は、同じクラス名についてここに表示されているものと異なる可能性があります。