カラーフォーマットの解説: HEX、RGB、HSL

ウェブでは同じ色をいくつもの書き方で表せます — #3498db、rgb(52, 152, 219)、hsl(204, 70%, 53%) はすべてまったく同じ青です。各フォーマットが何を意味するか（そしていつどれを使うか）を知れば、色を選び、調整し、合わせるのがずっと楽になります。このガイドは HEX・RGB・HSL とその関係を解きほぐします。

すべては赤・緑・青から始まる

画面は 3 つの色光を混ぜて色を作ります: 赤・緑・青。あなたが見るすべての色はこの 3 チャンネルの何らかの組み合わせで、それぞれ 0（オフ）から 255（最大）の強度に設定されます。真っ黒は 0, 0, 0、真っ白は 255, 255, 255。HEX と RGB はこの同じ 3 つの数値に対する 2 つの表記にすぎません。

RGB

RGB は 3 チャンネルの値を直接示します:

rgb(52, 152, 219)
     R    G    B

3 つの中で最も人が読みやすく、数値が「赤・緑・青がどれだけ」に直接対応するからです。チャンネルそのものを考えたいときに最適です。

HEX

HEX はまさにその 0–255 のチャンネル値を 16 進数（base 16）で、# の後に 3 組でエンコードします:

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

各組は 00（0）から ff（255）まで。HEX はコンパクトで、ほとんどのデザインツールと CSS の既定なので、最もよくコピペするフォーマットです。短縮形もあります: #39f は各桁を 2 倍にして #3399ff に展開されます。

HSL

HSL は人が色を直感的に考える方法で、3 つの異なる軸で色を記述します:

• 色相（Hue）（0–360°）— 色相環上の色そのもの: 0° 赤、120° 緑、240° 青。
• 彩度（Saturation）（0–100%）— どれだけ鮮やかか、グレーから純色まで。
• 明度（Lightness）（0–100%）— どれだけ明るいか、黒からその色を経て白まで。

hsl(204, 70%, 53%)
    hue  sat  light

HSL の超能力は色を 調整 することです。ある色のより暗いバージョンが欲しい? 明度を下げ、色相と彩度はそのまま。そろった陰影のセットが欲しい? 色相を固定して明度だけ変える。HEX や RGB でそれをやると 3 チャンネルすべてを計算し直しますが、HSL なら数値 1 つです。

アルファ: 透過を加える

各フォーマットには不透明度のための アルファ（alpha） チャンネルを持つ変種があります。0（完全透明）から 1（完全不透明）まで: rgba(52, 152, 219, 0.5) と hsla(204, 70%, 53%, 0.5)。最新の CSS は最後の組がアルファの 8 桁 HEX も許します — #3498db80 は同じ青を 50% で。

どれを使うべき?

• HEX — 固定のブランドカラーをコピーしたり、デザインツールに貼り付けるとき。コンパクトで普遍的。
• RGB / RGBA — 生のチャンネルを考えるときや、単純な透過が必要なとき。
• HSL / HSLA — デザイン するとき: パレット作り、ホバー/アクティブの陰影、感覚で色を調整。

うれしいことに、手で変換する必要はありません。当サイトの HEX↔RGB 変換ツール はフォーマット間を即座に移し、カラーピッカー は色を視覚的に選んでその HEX・RGB・HSL 値を一度に読めます — グラデーションやパレット作りも。画像から色を取り出したい? 画像カラーピッカー がまさにそれをします。