Tailwind Color 検索
任意のカラーコードを入力すると、それに最も近いTailwind CSSのカラーパレット名を教えてくれます。
▶このツールについて
入力したHEX形式のカラーコードから、一番色が近い「Tailwind CSS」の標準カラークラス名（bg-blue-500など）を検索できるツールです。デザインカンプの色をTailwindのユーティリティクラスで実装したいときに重宝します。
Tailwind CSSでスタイリングしている時、デザインツールからコピペした `#3b82f6` という色が、Tailwindのパレットだとどれに当てはまるのか迷ったことはありませんか？ このツールにカラーコードを入力すれば、「それは
blue-500 に一番近いよ」と即座に教えてくれます。独自のカラー設定（extend）をわざわざコンフィグに書かず、極力デフォルトのTailwindカラーで済ませたい派の方におすすめです。ツール操作
最も近い Tailwind クラス
—
—
使い方
- HEXカラーコードを入力欄に入力します
- Tailwindの色パレットから最も近いクラス名が表示されます
- bg-blue-500、text-red-600等の形式でコピーして使用できます
いつ使うか
デザインの色をTailwindクラスに変換、一貫したカラーパレットの確認に。
使用例
#3b82f6 → blue-500、#ef4444 → red-500
よくある質問
Tailwindの色の指定方法は？
色名-濃さで指定。blue-500、red-600など。50が最も薄く、950が最も濃いです。
カスタム色は？
tailwind.configでextendできます。このツールはデフォルトパレットのみ対応です。
HEXからTailwindのクラス名を調べるには？
このツールにHEXを入力すると、最も近いTailwindの色クラス名が表示されます。bg-blue-500、text-red-600など。
Tailwindのblue-500のHEXは？
#3b82f6。このツールの逆引きで、HEXからクラス名を検索できます。
Tailwindの色の濃さの段階は？
50,100,200,300,400,500,600,700,800,900,950。500が基準で、数字が大きいほど濃いです。
デザインの色をTailwindに合わせるには？
デザインツールのHEXをこのツールで検索し、最も近いTailwindクラスを採用。一貫したパレットになります。
Tailwindのgrayとslateの違いは？
grayはニュートラル、slateは青みがかったグレー。デザインのトーンに合わせて選択します。
Tailwindの色クラス一覧は？
slate,gray,zinc,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,roseなど。
bg-とtext-の違いは？
bg-は背景色、text-は文字色。border-は枠線色。同じ色名-濃さで用途が変わります。
Tailwind色検索ツールの使い方は？
HEXカラーコードを入力するだけで、Tailwindの全パレットから最も近いクラス名が即座に表示されます。