Tailwind 色変換

機能

• Tailwind クラス名 → hex / rgb / hsl
• hex・rgb()・hsl() → 色の値と最も近い Tailwind 色名
• v3 の既定パレットを内蔵：22 色系 × 11 段階 + 黒白、計 244 個
• クラス名は接頭辞（bg-、text-、border-t- など）付きでも可。透明度の /50 も認識
• 最も近い色は redmean で重み付けした RGB 距離で算出し、色差も表示
• 3 桁の 16 進数（#abc）と rgb/rgba、hsl/hsla に対応
• 各行の値の前にカラーチップを描画し、色がすぐ分かる
• 複数行を一度に変換し、1 行ずつコピーできます

使い方

1. 色の値または Tailwind クラス名を 1 行に 1 つ入力します
2. 出力形式（16 進数・rgb・hsl・Tailwind・すべて）を選びます
3. 変換結果と最も近い色名がすぐに表示されます
4. 行末のコピーボタンで必要な値を取り出せます

よくある質問

「最も近い色名」はどうやって求めますか？

redmean で重み付けした RGB 距離です。3 つのチャンネルそれぞれで差を求め、赤チャンネルの平均で重み付けします。16 進文字列の比較（1 桁違いの 2 つの青を無関係にしてしまいます）よりはるかに妥当で、RGB の素のユークリッド距離より人の目に近い結果になります（目は緑に最も敏感で、青に最も鈍いためです）。カラーマネジメント並みの CIEDE2000 ではありませんが、244 個の候補から最も近いものを選ぶには十分です。

一部の色に対応するクラス名がないのはなぜですか？

内蔵しているのが Tailwind の既定パレットで、あなたが定義した色を含まないためです。`tailwind.config` のパレットを変更している場合、「最も近い色名」は既定値だけを反映します。それでも、その色がどの色系のどの段階あたりかに当たるかの目安にはなります。

どのような色の表記に対応していますか？

16 進数（3 桁と 6 桁、先頭の `#` は有無どちらでも可）、`rgb()` / `rgba()`、`hsl()` / `hsla()`、そして Tailwind クラス名です。スペース区切りとカンマ区切りのどちらも認識します。

データはアップロードされますか？

いいえ。パレットと換算はすべてブラウザー内で完結し、ページは一切要求を送りません。