Color to Tailwindコンバーターとは？
このツールは、任意のカラーに最も近いTailwind CSSカラークラスを見つけます。Tailwindはred、blue、greenなどの名前付きカラーファミリーで50から950のシェードを持つデフォルトカラーパレットを提供しています。ブランドカラーやデザインからのHEX値がある場合、このコンバーターが最も近いTailwindユーティリティクラスを即座に教えてくれます。
使い方
- HEXカラー（例：
#3b82f6）またはRGB値（例：rgb(59,130,246)）を入力します。 - カラーピッカーで視覚的に選択することもできます。
- 「最も近いTailwindカラーを検索」をクリックして結果を確認します。
- マッチしたTailwindクラス、色の距離、比較プレビューが表示されます。
色の距離について
このツールはRGB色空間で入力とTailwind v3パレットの各色間のユークリッド距離を計算します。距離0は完全一致を意味します。値が小さいほど近い一致です。上位5つの最も近い色が表示されるので、デザインに最適な選択肢を選べます。
よくある質問
Tailwindのデフォルトカラーすべてに対応していますか？
はい、Tailwind v3デフォルトパレットのすべての名前付きカラーが含まれています：slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose。各カラーに50から950のシェードがあります。
近いマッチがない場合はどうすればいいですか？
Tailwindのシェードから遠い色の場合、bg-[#1a2b3c]のようなTailwindの任意値構文を使用して正確な色をCSSで指定することを検討してください。