Tailwind パレット
Tailwind カラー変換ツール - 最も近いクラスを探す
任意の HEX・RGB・HSL の色を最も近い Tailwind CSS パレットの色に変換し、bg・text・border・ring のクラス名をコピーできます。
最も近い Tailwind カラー
Blue 500完全一致
Indigo 500Δ 0.0671
Blue 600Δ 0.0758
Sky 600Δ 0.0765
Indigo 400Δ 0.0842
Sky 500Δ 0.0981
使い方
ブランドカラーやデザインの色を貼り付けて、最も近い Tailwind パレットの色を探します。近い候補を距離とともに並べ、マークアップにコピーできるユーティリティクラス名を作成します。
- 1 デザインの色を入力します。
- 2 最も近い Tailwind パレットの候補を比較します。
- 3 bg、text、border、ring のユーティリティクラスをコピーします。
よくある質問
完全に一致しますか？
入力が Tailwind パレットの値と同じ場合のみです。それ以外は最も近い Tailwind の色を返します。
候補はどう順位付けされますか？
知覚的な OKLab 色空間で比較するため、単純な RGB 距離よりも人の感覚に近い順位になります。
独自のブランドカラーにも使えますか？
はい。プロトタイプには最も近い Tailwind の色を使い、本番では元の色をカスタムの Tailwind テーマトークンに登録しましょう。
どの Tailwind クラスが生成されますか？
最も近いパレット色について、よく使う bg-、text-、border-、ring- のユーティリティクラスを生成します。