カラーコード入門 — HEX・RGB・HSLの違いと相互変換

Web やデザインで色を指定するとき、#3366cc のような HEX、rgb(51,102,204) のような RGB、hsl(220,60%,50%) のような HSL という3種類の書き方をよく目にします。これらはいずれも同じ色を別の表記で表したものです。本記事では、それぞれの仕組みと使いどころ、そして相互に変換する手順を、検算した正しい例とともに解説します。

1. 色のデジタル表現（RGBの基本）

ディスプレイ上の色は、赤（R）・緑（G）・青（B）の光を混ぜ合わせて作られます。光は混ぜるほど明るくなり、3色すべてを最大にすると白になります。これを加法混色と呼びます（絵の具の減法混色とは逆です）。

各チャンネルの強さは、通常 8ビット＝0〜255 の256段階で表します。3チャンネルあるので、表現できる色は 256 × 256 × 256 = 約1,677万色になります。たとえば R=51, G=102, B=204 は、赤を少し・緑を中くらい・青を強めに混ぜた青系の色です。

• (0, 0, 0) = 黒（すべて消灯）
• (255, 255, 255) = 白（すべて最大）
• (255, 0, 0) = 赤 / (0, 255, 0) = 緑 / (0, 0, 255) = 青

2. HEX（16進カラーコード）

HEX は、RGB の各値を 16進数2桁で並べ、先頭に # を付けた表記です。形は #rrggbb で、rr が赤、gg が緑、bb が青を表します。16進数では 0〜255 が 00〜ff に対応します。

3桁の短縮表記（#rgb）

各チャンネルの2桁が同じ文字の繰り返し（33・66・cc など）になるときは、各桁を1文字に縮めた 3桁表記 が使えます。#36c は各桁を2回繰り返した #3366cc と同じ意味です。ただし #1a2b3c のように繰り返しにならない色は短縮できません。

アルファ付き（#rrggbbaa / #rgba）

末尾にもう1チャンネル足すと不透明度（アルファ）を表せます。#rrggbbaa の aa は 00（完全に透明）〜ff（完全に不透明）です。たとえば #3366cc80 は #3366cc をおよそ50%の不透明度にした色です（80 は10進で128 ≒ 255の約50%）。4桁短縮 #36c8 も同様に使えます。

3. RGB / RGBA

CSS では rgb() 関数で同じ色を10進数のまま書けます。rgb(51, 102, 204) がそれです。透明度を加えるなら rgba()、または新しい記法の rgb(51 102 204 / 50%) を使い、最後の値で不透明度を指定します。

各チャンネルは 0〜255 の整数のほか、0%〜100% の相対値（パーセント）でも書けます。rgb(20%, 40%, 80%) は 20% × 255 ≒ 51、40% × 255 ≒ 102、80% × 255 = 204 となり、rgb(51, 102, 204) とほぼ同じ色になります。数値が直接 RGB チャンネルに対応するため、プログラムで色を計算するときに扱いやすい表記です。

4. HSL / HSLA

HSL は、色を 色相（Hue）・彩度（Saturation）・輝度（Lightness）の3要素で表します。hsl(220, 60%, 50%) のように書きます。

• 色相 H：色味を 0〜360度の円で表す（0＝赤、120＝緑、240＝青、再び360＝赤）。
• 彩度 S：鮮やかさを 0%〜100%で表す（0%＝灰色、100%＝最も鮮やか）。
• 輝度 L：明るさを 0%〜100%で表す（0%＝黒、50%＝純色、100%＝白）。

HSL が好まれる理由は、人間の感覚に近く調整しやすい点にあります。「色味はそのままで少し明るくしたい」なら L を上げ、「くすませたい」なら S を下げる、というように1つの軸だけを動かせば狙った調整ができます。RGB/HEX では同じことをするのに3つの値を同時に変える必要があり、直感的ではありません。透明度を加える hsla() や hsl(220 60% 50% / 50%) という記法も使えます。

5. 相互変換の手順

RGB → HEX

各チャンネルを16進数2桁に変換して並べるだけです。1桁になる場合は先頭に 0 を補います。

• 51 → 33（51 = 3×16 + 3）
• 102 → 66（102 = 6×16 + 6）
• 204 → cc（204 = 12×16 + 12、12 = c）

並べると #3366cc になります。

HEX → RGB

逆に、2桁ずつ切り出して10進に戻します。cc なら 12×16 + 12 = 204。3桁 HEX の場合は各桁を2回繰り返してから変換します（#36c → #3366cc）。

RGB → HSL

標準アルゴリズムは次の手順です。#3366cc＝rgb(51, 102, 204) を例に計算します。

1. 各値を255で割って0〜1にする：R=0.2, G=0.4, B=0.8。
2. 最大値 max=0.8、最小値 min=0.2、差 d=0.6 を求める。
3. 輝度 L ＝ (max + min) / 2 = (0.8 + 0.2) / 2 = 0.5 → 50%。
4. 彩度 S ＝ d / (1 − |2L − 1|) = 0.6 / 1 = 0.6 → 60%（L=0.5 のとき分母は1）。
5. 色相 H：最大が B なので H = 60 × ((R − G) / d + 4) = 60 × ((0.2 − 0.4) / 0.6 + 4) = 60 × 3.667 ≈ 220度。

結果は hsl(220, 60%, 50%) となり、元の色と一致します。（色相の式は、最大がRなら ((G−B)/d) mod 6、Gなら (B−R)/d + 2、Bなら (R−G)/d + 4 に60を掛けます。）

HSL → RGB

逆変換も定義されています。輝度と彩度から中間値 C = (1 − |2L − 1|) × S を求め、色相を60度ごとの区間に分けて R・G・B を割り当て、最後に (L − C/2) を全チャンネルに足します。hsl(220, 60%, 50%) を戻すと rgb(51, 102, 204) に一致します。手計算は煩雑なので、実務では下のツールで一発変換するのが確実です。

6. コントラストとアクセシビリティ

色を選ぶときは見た目だけでなく、文字と背景のコントラストも大切です。コントラストが低いと、視力の弱い人や明るい屋外では文字が読みづらくなります。

Web のアクセシビリティ指針 WCAG（Web Content Accessibility Guidelines）では、通常の文字でコントラスト比 4.5:1 以上、大きな文字で 3:1 以上が推奨されています。コントラスト比は文字色と背景色の相対輝度から計算されます。HSL で輝度（L）を意識すると、明暗の差を取りやすく、結果としてコントラストの調整もしやすくなります。配色を決めたら、コントラスト比もあわせて確認しておくと安心です。