カラー変換
HEX・RGB・HSL・OKLCH変換＋ピッカー・履歴。
TW
Tailwindカラー検索
任意のHEXに最も近いTailwind v4カラークラスを検索。
最も近いクラス完全一致
blue-500#3b82f6入力色
#3b82f6
blue-500
#3b82f6
コピペ用クラス
bg-blue-500text-blue-500border-blue-500blue-500完全一致#3b82f6 · Δ0.0000
indigo-500#6366f1 · Δ0.0718
sky-600#0284c7 · Δ0.0787
indigo-400#818cf8 · Δ0.0823
blue-600#2563eb · Δ0.0823
sky-500#0ea5e9 · Δ0.0982
blue-400#60a5fa · Δ0.1021
violet-500#8b5cf6 · Δ0.1203
近似度は知覚的な色差（OKLab距離）で計算しています。完全一致以外はあくまで最も近いクラスであり、見え方は元の色と厳密には異なります。カスタムテーマ色はTailwindのデフォルトパレット外なので対象外です。
Tailwindカラー検索について
Tailwindカラー検索とは、デザインファイルから拾った任意のHEXを、Tailwind CSS v4のデフォルトパレット上で最も近いクラス名（例: blue-500）に対応付けるツールです。「このHEX、Tailwindだとどのクラスだっけ？」という一番よくある悩みに、それだけを素早く答えます。
toco.toolsでは入力色と一致色を並べて表示し、見た目の差を自分の目で確認できるようにしています。判定には人間の知覚に近いOKLab色空間での距離（oklabDistance）を使っており、単純なRGBの数値差では出てこない自然な近さの順位付けになります。完全一致のときだけ「完全一致」バッジを表示し、それ以外は最も近い候補であることを明示します。
ベストマッチには bg-/text-/border- の3パターンをコピペ用に用意しています。カスタムテーマで拡張した色はTailwindのデフォルトパレット外のため対象外です。プロジェクトのtailwind.config・CSS変数を正としてください。
使い方
- HEXまたはピッカーで色を指定
- 最も近いクラスと完全一致バッジを確認
- クラス名やbg-/text-/border-をコピー
よくある質問（FAQ）
Tailwindカラー検索とは何ですか？
任意色に最も近いTailwind v4の色ユーティリティクラスを探すツールです。デザインのHEXをコード上のクラス名に変換したいときに使います。
「完全一致」でない場合、色は正確に合っていますか？
いいえ。完全一致バッジがない場合は「最も近い候補」であり、見た目は元の色と微妙に異なります。入力色と一致色を並べて表示しているので、その差が許容範囲かどうかを確認してください。
なぜ「近い」の基準がRGBの数値差ではないのですか？
単純なRGB距離は人間の見た目の感覚とずれることがあります。toco.toolsはOKLabという知覚均等な色空間での距離を使っており、より自然な近さの順位付けになります。
カスタムテーマの色にも対応していますか？
いいえ。このツールはTailwind CSS v4のデフォルトパレットのみを対象にしています。tailwind.configやCSS変数で拡張した独自色は含まれません。
入力したデータは外部に送信されますか？
いいえ。すべての処理はブラウザ内で完結し、toco.toolsのサーバーへ送信されません。