🎨 Tailwindカラー変換ツール

任意のHEXカラーを、Tailwind CSSの標準パレット（22系統 × 11段階、計242色）の中から知覚的に最も近いクラスにマッチングします。逆に色系統と明度（shade）を選べば、そのクラスの正確なHEX・RGB値をその場で確認してコピーできます。

使い方

1. 「HEX → クラス」タブでカラーピッカーまたはHEX入力欄から色を指定します。
2. 最も近いTailwindクラスと候補色、Δ（色の距離）を確認し、クラス・HEX・bg- ユーティリティをコピーします。
3. 「クラス → HEX」タブでは色系統と明度を選ぶとHEX・RGB値が表示されます。
4. 必要な値の横のコピーボタンでコードにそのまま貼り付けます。

よくある質問

なぜ実際の色とマッチしたクラスの色が少し違うのですか？

Tailwindの標準パレットには決まった242色しかないため、任意のHEXと完全に同じにはなりません。このツールは知覚的近似（redmean）の色距離で最も近い色を選び、表示されるΔ値が小さいほど元の色に近くなります。

Tailwind v4でもそのまま使えますか？

標準パレットの色値はv3とv4でほぼ同一なので、ほとんどそのまま活用できます。ただしプロジェクトでテーマ色をカスタムで再定義している場合は、その設定に従ってください。

入力した色はサーバーに送信されますか？

いいえ。すべての変換はブラウザ内だけで処理され、どのデータも送信・保存されません。表示されるクラス名は参考用なので、実際のデザインシステムの値と照らし合わせてご利用ください。