カラーコード変換
HEX・RGB・HSLフォーマット間で色を変換し、最も近いTailwind CSSクラスを即時表示。
indigo-500
最も近いTailwindカラークラス
HEX・RGB・HSL・Tailwindカラーコード変換 — 即時相互変換
UI構築中に色フォーマットを切り替えるのは面倒です。ZolkitのカラーコンバーターはHEX・RGB・HSLを双方向で変換でき、最も近いTailwind CSSカラークラスも自動検索します — デザインツールのhexコードからユーティリティクラスへ1ステップで移行できます。
3フォーマット同時表示
HEX・RGB・HSLいずれのフォーマットを編集しても、他のすべてが即座に更新されます。1つの値を変えるだけで全表現が同期します。
Tailwindカラーマッチング
RGB空間のユークリッド距離を使用して、Tailwind v3の22ファミリー全パレットから最も近いカラークラスを自動検索します。
リアルタイムカラースウォッチ
大きなカラーピッカーで、値を調整しながら選択した色を即座に視覚的に確認できます。
各フォーマットをコピー
各フォーマットカードのワンクリックコピー — HEX文字列・rgb()関数・hsl()関数・Tailwindクラス名を個別にコピーできます。
完全プライベート
すべての色計算はブラウザ内でローカルに実行されます。データがサーバーに送信されることはありません。
ずっと無料
アカウント不要、制限なし、有料壁なし。カラーコード変換は常に無料です。
カラーコードを変換する方法
- 1
カラーピッカーをクリックするか、いずれかのフォーマットフィールド（HEX・RGB・HSL）に値を入力します。
- 2
他のすべてのフォーマットフィールドが自動的に更新されます。Tailwindカードには最も近いユーティリティクラスが表示されます。
- 3
任意のカードの「コピー」ボタンをクリックして、そのフォーマットをクリップボードにコピーします。
よくある質問
このツールはどのカラーフォーマットに対応していますか？
HEX（6桁、例：#3b82f6）・RGB（チャンネルごと0〜255）・HSL（色相0〜360°、彩度・明度0〜100%）・Tailwind CSSクラス名に対応しています。いずれのフォーマットを編集しても他が即座に更新されます。
Tailwindカラーマッチングはどのように機能しますか？
Tailwind v3パレットの全色（22カラーファミリー×11シェード、約242色）に対してRGB空間のユークリッド距離で比較します。最も近い色がユーティリティクラス名（例：「blue-500」）として返されます。
Tailwindのマッチングは常に完全一致しますか？
常にではありません。入力色がTailwindの色と完全に一致する場合は完全一致となります。任意の色の場合は最近傍の色が返され、視覚的に同一ではない場合があります。クラス名の隣のカラースウォッチで比較できます。
パレットはTailwindのどのバージョンのものですか？
Tailwind CSS v3のデフォルトパレットを使用しています。全22カラーファミリー（slate・gray・zinc・neutral・stone・red・orange・amber・yellow・lime・green・emerald・teal・cyan・sky・blue・indigo・violet・purple・fuchsia・pink・rose）の11シェード（50〜950）が含まれています。
HSLの値を直接入力できますか？
はい。HSLの3つの数値入力（H・S・L）のいずれかをクリックして値を入力できます。色相は0〜360度、彩度と明度は0〜100パーセントです。HEXとRGBのフィールドは入力と同時に更新されます。
オフラインでも使えますか？
はい、ページ読み込み後は使用できます。すべての変換計算とTailwindの参照テーブルはJavaScriptにバンドルされており、色変換中にネットワークリクエストは発生しません。