Tailwindカラー検索ツールとは？

Tailwind Color Finderは、任意のHEXカラーコードを入力すると、最も近いTailwind CSSのユーティリティクラスを即座に見つけます。カラーパレットを目で見比べる代わりに、デザインツールからHEXコードを貼り付けるだけで、マークアップに使える正確なTailwindクラス名を取得できます。

使い方

1. デザインモックアップからHEXカラーコードを入力するか、カラーピッカーで色を選択してください。
2. 最も近いTailwind CSSカラークラスが、視覚的な横並び比較とともに即座に表示されます。
3. Tailwindクラス名（例: bg-blue-500）をコピーしてコードに直接貼り付けられます。カラー距離を確認して、マッチの精度を判断できます。

結果

デザイナーからブランドカラー #2563EB を受け取った場合。貼り付けると、blue-500 と完全一致することが分かります。#3A7BC8 の場合は、sky-600 が最も近いマッチとして表示され、距離スコアで近似度を確認できます。

関連ツール