Tailwindカラー検索ツールとは？
Tailwind Color Finder は、hex・rgb()・hsl()・teal のような CSS カラー名など、あらゆるカラー値を受け取り、Tailwind CSS のうち最も近いユーティリティクラスを瞬時に返します。パレットを目視で見比べる必要はなく、デザインツールから値を貼り付けるだけで、コードにそのまま書けるクラス名が得られます。
マッチングは単純な RGB の差ではなく CIE Lab 空間での知覚距離(ΔE)を使うため、数値的に近いものではなく目で見て近い色が選ばれます。Tailwind v3/v4 のデフォルトパレット全体、slate から rose までの色系、50〜950 の各シェード、黒と白までを探索します。上位 10 件を距離スコアつきで表示するので、色相と明度のどちらを優先するか自分で選べます。
使い方
- デザインモックアップからHEXカラーコードを入力するか、カラーピッカーで色を選択してください。
- 最も近いTailwind CSSカラークラスが、視覚的な横並び比較とともに即座に表示されます。
- Tailwindクラス名（例: bg-blue-500）をコピーしてコードに直接貼り付けられます。カラー距離を確認して、マッチの精度を判断できます。
使用するタイミング
- ブランドや Figma で指定された hex を、新規プロジェクトの Tailwind クラスに置き換えるとき。
- ベタ書き hex が散らばった古い CSS をユーティリティクラスへ移行するとき。
- デザイナーから hex を 1 つだけ渡されたときに、red-500 と rose-500 のどちらが意味的に合うか決めたいとき。
結果
デザイナーからブランドカラー #2563EB を受け取った場合。貼り付けると、blue-500 と完全一致することが分かります。#3A7BC8 の場合は、sky-600 が最も近いマッチとして表示され、距離スコアで近似度を確認できます。
よくある質問
- もっとも近い Tailwind カラーをどうやって判定していますか?
- 2 つの hex を CIE Lab に変換し、ΔE76 を計算しています。ΔE76 は目で見た色差に近い距離指標で、1 以下ならほぼ見分けがつかず、5 を超えると色相や明度の差が明確になります。
- どのバージョンの Tailwind パレットを使っていますか?
- v3/v4 のデフォルトパレットです。slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose の 22 系統 × 50〜950 のシェードに、黒と白を加えています。テーマ拡張のカスタム色は対象外です。
- 入力した hex が予想外のシェードに割り当てられるのはなぜ?
- Lab 距離は色相・彩度・明度をまとめて比べます。くすんだ緑は鮮やかな teal より明度の近い slate に寄りやすいことがあります。1 位がしっくりこないときは上位 10 件から、色相ファミリで選び直すと納得しやすいはずです。
- 結果を Tailwind クラスではなく CSS 変数として使いたい場合は?
- 詳細パネルにはクラス名(例:bg-blue-500)と hex が両方表示されます。ユーティリティを直接使わない場合は hex をコピーして var(--brand) に詰め直してください。 さらにパレットに十分近い色がない場合は、あなたの正確な色から作った任意値クラス(bg-[#hex])も提示するので、テーマを変えずにピクセル単位で正確なまま使えます。
- hex の代わりに rgb()、hsl()、CSS カラー名を貼り付けても動きますか?
- はい。フォームは hex(#2563EB または 2563EB、3 桁・6 桁)、rgb()/rgba()、hsl()/hsla()(色相は deg 付き・単位なしのどちらも可)、そして CSS の名前付きカラー(teal、rebeccapurple、cornflowerblue など)をすべて解釈します。アルファチャンネルは無視され、不透明な RGB 等価値で比較が行われます。