このツールはどのカラーフォーマットに対応していますか？

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にバンドルされており、色変換中にネットワークリクエストは発生しません。

カラーコード変換

HEX・RGB・HSLフォーマット間で色を変換し、最も近いTailwind CSSクラスを即時表示。

#6366F1

HEX

RGB

HSL

H°

Tailwind

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
任意のカードの「コピー」ボタンをクリックして、そのフォーマットをクリップボードにコピーします。