Webサイトのデザインやコーディングをしていると、「#3498DB」「rgb(52, 152, 219)」「hsl(204, 70%, 53%)」のように、同じ青色を指すはずなのに見た目が全然違う表記に出会うことがあります。HEX・RGB・HSLはすべて「色を文字や数値で表す方法」ですが、それぞれ仕組みも得意な場面も違います。この記事では3つの形式の仕組みと使い分けを解説します。
1. HEX：16進数2桁を3つ並べる方式
HEX（16進数カラーコード）は「#RRGGBB」のように、赤(R)・緑(G)・青(B)それぞれの強さを16進数2桁（00〜FF、10進数では0〜255）で表す方式です。「#3498DB」であれば、赤が34(16進数)、緑が98、青がDBという強さで混ざっていることを意味します。CSSやデザインツールで最もよく使われる表記で、短く書けるのが利点です。
「#39D」のような3桁の省略形も使えます。これは各桁を2回繰り返した「#3399DD」と同じ意味になる表記で、3桁とも同じ数字を繰り返せる色限定で使える短縮ルールです。
2. RGB：赤・緑・青の強さをそのまま数値で表す方式
RGBは「rgb(52, 152, 219)」のように、赤・緑・青それぞれの強さを0〜255の10進数で表す方式です。HEXとRGBは表現できる色の範囲も精度も全く同じで、見た目の表記が違うだけの「同じ情報の別の書き方」と考えて問題ありません。
光の三原色（赤・緑・青）を混ぜ合わせて色を作る「加法混色」の考え方がベースになっていて、3つすべてが255（最大）だと白、すべてが0だと黒になります。プログラミングで色を数値として扱いたいとき（明るさを計算する、グラデーションを作るなど）はRGBの方が扱いやすい場面が多いです。
3. HSL：色相・彩度・明度で表す方式
HSLは「hsl(204, 70%, 53%)」のように、色相(Hue)・彩度(Saturation)・明度(Lightness)という3つの要素で色を表す方式です。HEXやRGBと違い、人間が色を感覚的に理解しやすい順番で並んでいるのが特徴です。
| 要素 | 意味 | 値の範囲 |
|---|---|---|
| 色相 (Hue) | 色の種類（赤・青・緑など）を角度で表す | 0〜360度 |
| 彩度 (Saturation) | 色の鮮やかさ。低いほど灰色に近づく | 0〜100% |
| 明度 (Lightness) | 明るさ。0%は黒、100%は白 | 0〜100% |
HSLの強みは「同じ色のまま明るさだけ変えたい」「色相だけ少しずらしたい」といった調整がしやすいことです。例えばボタンのホバー時に少し暗い色にしたい場合、HEXやRGBでは3つの数値をまとめて計算し直す必要がありますが、HSLなら明度の数値を1つ下げるだけで済みます。
4. どの形式を使えばいいか
どの形式を使っても色の見た目自体は変わりません。実務では次のような使い分けがよく見られます。
| 場面 | 向いている形式 | 理由 |
|---|---|---|
| デザインツールからコードに貼り付ける | HEX | Figma・Photoshopなど多くのツールがHEXで色を表示するため |
| プログラムで色を計算・加工する | RGB | 赤緑青の数値をそのまま演算に使えるため |
| 明度・彩度だけ調整したい | HSL | 色相を保ったまま明るさ・鮮やかさだけ変更できるため |
5. 透明度を表す「アルファ値」
色に透明度を持たせたい場合は、HEXなら8桁の「#RRGGBBAA」、RGBなら「rgba(52, 152, 219, 0.5)」、HSLなら「hsla(204, 70%, 53%, 0.5)」のように、末尾にアルファ値（透明度。0が完全な透明、1が完全な不透明）を追加します。CSSでは現在どの形式でもアルファ値を指定できるようになっています。
6. 配色を考える際のコントラスト比への配慮
Webデザインでは色の見た目だけでなく、背景色と文字色の「コントラスト比」も重要です。コントラスト比が低いと、視力に問題がない人でも文字が読みにくくなり、特に視覚に障害のある方にとっては大きな障壁になります。
Web Content Accessibility Guidelines（WCAG）では、通常の文字サイズでコントラスト比4.5:1以上を確保することが推奨されています。HSL形式で色を扱っていると、明度（Lightness）の差を意識的に大きく取ることでコントラスト比を確保しやすくなります。背景が白（明度100%）なら、文字色の明度を30%以下に抑えるなどの目安があります。
7. 変換時に起きやすい「微妙なズレ」
HEXとRGBは1対1で正確に変換できますが、HSLに変換すると小数点以下が出る場合があります。例えば「#3498DB」をHSLに変換すると彩度・明度が「70.4%」のような端数になり、ツールによって小数点第1位で四捨五入するか切り捨てるかが違うため、別のツールで再変換すると1色ずれた数値になることがあります。デザインデータの色を1ピクセル単位で厳密に一致させたい場合は、変換を挟まずHEXのまま受け渡しするのが確実です。
8. 印刷物を扱う場合のCMYKとの違い
Web制作ではHEX・RGB・HSLの3つで足りますが、チラシや名刺など印刷物のデザインでは「CMYK」（シアン・マゼンタ・イエロー・黒の4色インクの配合率）という別の方式も登場します。CMYKは光ではなくインクの重ね合わせで色を作るため、同じ見た目を指定していても画面(RGB)と印刷(CMYK)で色味が変わることがあります。Web用の色をそのまま印刷に流用すると、思ったより暗く沈んだ色で出力される場合があるので、印刷所の入稿ルールに従ってCMYK値を別途指定するのが安全です。
まとめ
HEX・RGB・HSLは同じ色を表す3つの異なる「言い方」で、変換しても色そのものは変わりません。デザインから受け取った色をコードに変換したいときや、逆にコード上の色をデザインツールで確認したいときは、カラーコード変換ツールで3形式をまとめて確認できます。