HEX⇔RGB⇔HSL変換ツール

HEX⇔RGB⇔HSL変換ツールの使い方

HEX⇔RGB⇔HSL変換ツールは、カラーコードの3形式を相互変換できる無料ツールです。会員登録は不要で、入力内容はブラウザの外に送信されません。

1. 入力欄にHEX（#217346）、RGB（rgb(33,115,70)）、HSL（hsl(147,55%,29%)）のいずれかの形式で色を入力します。形式は自動で判別されます。
2. カラーピッカーをクリックして視覚的に色を選ぶこともできます。
3. 3つの形式すべてと色見本が同時に表示されます。
4. 各行のコピーボタンで、その形式の値だけをコピーできます。

3つの形式の違いについて

HEXは16進数2桁×3（赤・緑・青）で色を表す最も一般的な表記です。RGBは同じ情報を10進数で表します。HSLは色相（Hue）・彩度（Saturation）・明度（Lightness）で表す方式で、「同じ色相のまま明るさだけ変える」といった直感的な調整に向いています。

• HEXは3桁の短縮形（例：#0f6）にも対応しています。各桁が2回繰り返された形（#00ff66）として展開されます。
• HSLへの変換結果は、明度・彩度の調整が必要な場合に明度・彩度調整ツールで使えます。
• 変換の精度上、HEX→HSL→HEXのように往復すると、四捨五入により元の値と1程度の誤差が出ることがあります。

よくあるつまずきポイント

• CSSの古いプロパティ（IE向けフィルターなど）ではAARRGGBBのような特殊な並び順が使われることがあります。このツールは標準のHEX（#RRGGBB）のみに対応しています。
• RGBA・HSLA（透明度つき）の入力には対応していません。透明度を除いた色部分のみで判定されます。
• デザインツール（Figmaなど）とコードエディタで色の表記形式が異なる場合、このツールで変換してから貼り付けるとスムーズです。