HEX ⇄ RGB ⇄ HSL カラーコード変換
使い方
カラーピッカーパネルをクリックまたはドラッグして色を選択します。横軸が彩度、縦軸が明度です。色相バーで基本色を変更、アルファバーで透明度を調整できます。HEX・RGB・HSLの入力欄に直接値を入力することも、各チャンネルのスライダーで微調整することも可能です。すべての入力は双方向で連動し、いずれかの値を変更すると他のすべてのフォーマットがリアルタイムで更新されます。
カラーフォーマット
- HEX（#ff0000）：16進数表記で、CSSで最も一般的な形式です。6桁で赤・緑・青（各2桁、00-ff）を表現します。HEXAは透明度を表す2桁が追加されます。
- RGB（rgb(255, 0, 0)）：赤・緑・青の光の三原色で色を定義します。各チャンネルは0〜255の範囲です。RGBAはアルファ値（0＝透明〜1＝不透明）が追加されます。
- HSL（hsl(0, 100%, 50%)）：色相（0-360°）・彩度（0-100%）・明度（0-100%）で色を指定します。色の調整が直感的で、色相を変えるとカラーホイール上を回転し、彩度と明度で鮮やかさと明るさを制御します。
アルファチャンネル（透明度）
アルファチャンネルは色の透明度を制御します。1が完全に不透明、0が完全に透明です。アルファを設定すると、HEXA・RGBA・HSLAフォーマットが標準フォーマットとともに表示されます。プレビューのチェッカーボードパターンが透明度を示します。
活用シーン
- CSSスタイリング：HEXやRGBの値をスタイルシートに直接コピー
- デザイン連携：デザインツール間のフォーマット変換（FigmaはHEX、一部のツールはHSLを使用）
- アクセシビリティ：HSLの明度を調整して十分なコントラスト比を確保
- ブランディング：スライダーで正確なブランドカラーを微調整
プライバシー
すべての変換処理はブラウザ内で完結します。データがサーバーに送信されることは一切ありません。
よくある質問
HEX・RGB・HSL はどう使い分ければいいですか？
HEX は最もコンパクトで CSS やデザインツールで広く使われます。RGB は赤・緑・青の光の量を直接指定するためプログラミングや画像処理に向き、HSL は色相・彩度・明度で表すため手作業での色調整が直感的です。同じ色を 3 形式で同時に表示するので、用途に合わせてコピーできます。
入力した色はサーバーに送信されますか？
いいえ。HEX・RGB・HSL の相互変換はすべてブラウザ内で行われ、入力した色がサーバーに送信されたり保存されたりすることはありません。未公開のブランドカラーでも安心して使えます。
アルファ（透明度）には対応していますか？
はい。アルファバーやスライダーで透明度を設定すると、HEXA・RGBA・HSLA 形式が標準形式とともに表示されます。アルファは 1 が完全な不透明、0 が完全な透明です。
入力欄に直接値を打ち込めますか？
はい。HEX・RGB・HSL の各入力欄に値を直接入力でき、いずれかを変更すると他のすべての形式とカラーピッカーがリアルタイムで連動して更新されます。スライダーでチャンネルごとに微調整することも可能です。
HSL の彩度と明度はどう操作しますか？
カラーピッカーパネルの横軸が彩度、縦軸が明度に対応し、クリックまたはドラッグで調整します。色相バーで基本色を変えると、カラーホイール上を回転するように色相だけが変化します。