CSSを触っていると #ff0000 やrgb(255, 0, 0)、hsl(0, 100%, 50%) など、 同じ赤色でも3種類以上の書き方に出会います。「どれを使えばいいの？」「#ff0000ってそもそも何進数？」 と迷ったことがある方に向けて、HEX・RGB・HSLの違いと、CSSでの使い分けの判断基準、 そしてアクセシビリティを意識した配色の考え方を解説します。
HEX表記 — 「#」から始まる16進数コード
HEX（Hexadecimal、16進数）表記は、Webで最もよく使われる色指定の形式です。# のあとに6桁（または3桁）の文字を並べ、 2桁ずつ赤（R）・緑（G）・青（B）の強さを表します。各成分は00（なし）からff（最大、10進数で255）までの256段階です。
たとえば #ff0000 は「赤255・緑0・青0」で純粋な赤、#00ff00 は純粋な緑、#ffffff は白、#000000 は黒になります。 3桁に省略したときは各桁を2回繰り返したものと等価（#fff ＝ #ffffff）です。
HEXの強みは短く書けることと、デザインツール（Figma・Photoshop）との互換性です。 Figmaのカラーピッカーはデフォルトでも6桁HEXを返すので、デザインからコードへの受け渡しで齟齬が起こりにくい形式です。
RGB・RGBA表記 — 10進数で成分を書く
RGB表記は、赤・緑・青の成分を10進数の0〜255で並べる書き方です。rgb(255, 0, 0) のように書き、内容はHEXの #ff0000 と同じです。 HEXより長いものの、数値として計算しやすいという利点があり、JavaScriptで色を動的に生成するケースでは重宝します。
RGBA表記はRGBに「アルファ（A、透明度）」を加えた形式です。rgba(0, 0, 0, 0.5) は「50%透過の黒」を意味し、 下にある背景が透けて見えます。アルファ値は0（完全透明）から1（完全不透明）までの小数で指定します。
RGBAはモーダルの背景オーバーレイ、ホバー時の薄いハイライト、 画像の上に文字を重ねる際の「薄い黒のレイヤー」など、重ね塗りが必要な場面で活躍します。 CSS Color Module Level 4 ではrgb(0 0 0 / 50%)のようにカンマなし・パーセント指定も可能になっており、最新ブラウザではこちらが推奨されつつあります。
HSL表記 — 人の感覚に近い色指定
HSLは色相（Hue）・彩度（Saturation）・明度（Lightness）の3つで色を表現します。hsl(0, 100%, 50%) は純粋な赤、hsl(120, 100%, 50%) は純粋な緑、hsl(240, 100%, 50%) は純粋な青です。
- 色相（H）：0〜360度の角度。0（赤）→ 120（緑）→ 240（青）→ 360（再び赤）と円を描く
- 彩度（S）：0%（灰色）〜100%（鮮やかな純色）。下げるとくすんだ色になる
- 明度（L）：0%（黒）〜100%（白）。50%で本来の色、上げると白寄り、下げると黒寄り
HSLの最大の利点は直感的に色を調整できることです。 「このボタンの色をホバー時に少し暗くしたい」なら明度を10%下げるだけで済みますし、 「同じ色相で彩度違いのカラーパレットを作る」のもHSLなら一発です。 RGB/HEXで同じことをしようとすると、各成分を微調整する計算が必要になります。 このためTailwind CSSのデフォルトカラーパレットや、多くのデザインシステムの内部はHSLで設計されています。
4形式の比較表
| 形式 | 例（赤） | 透明度 | 向いている用途 |
|---|---|---|---|
| HEX | #ff0000 | 8桁表記で可（#ff0000cc） | デザインツール連携・短く書きたい場面 |
| RGB | rgb(255, 0, 0) | RGBAで指定 | JavaScriptでの色生成・数値計算 |
| RGBA | rgba(255, 0, 0, 0.5) | ◯（第4引数） | 背景オーバーレイ・半透明ハイライト |
| HSL | hsl(0, 100%, 50%) | HSLAで指定 | テーマ設計・色の微調整・カラーパレット生成 |
どの形式を使うべきか — 判断基準
結論から言うと、「迷ったらHEX、透明度が必要ならRGBA、テーマ設計ならHSL」という使い分けが実用的です。
- HEXを選ぶ場面：デザインカンプの色をそのまま写すとき、ドキュメントやSlackで色を共有するとき
- RGBAを選ぶ場面：半透明の背景・オーバーレイ・box-shadowの影色など透明度を伴うとき
- HSLを選ぶ場面：ボタンのホバー色を元色から自動生成したいとき、カラーパレット全体を設計するとき
同じ色でも形式を変換したい場面は頻繁に発生します。色コード変換ツールを使えば、HEXを入力するだけでRGB・HSLの同じ色が同時に表示され、カラープレビューで見た目も確認できます。
アクセシビリティと「コントラスト比」
配色を決めるときに見落とされがちなのがコントラスト比です。 これはテキスト色と背景色の明るさの差を1:1〜21:1の範囲で数値化した指標で、 WCAG（Web Content Accessibility Guidelines）2.1では次の基準が示されています。
| レベル | 通常テキスト | 大きなテキスト |
|---|---|---|
| AA（推奨） | 4.5:1 以上 | 3:1 以上 |
| AAA（望ましい） | 7:1 以上 | 4.5:1 以上 |
たとえば白背景（#ffffff）にライトグレー（#cccccc）の文字は約1.6:1しかなく、AA基準を大きく下回ります。 特にモバイルの屋外利用や視力の弱い方にとっては読めないレベルです。 デザインカンプの段階でChrome DevToolsやFigmaのコントラストチェッカーで確認し、 基準を下回る組み合わせは明度を調整（HSLのLを下げる、など）して修正するのが定石です。
CSS Color Module Level 4 以降の新形式
近年のブラウザでは、より表現力の高い新しい色指定形式もサポートされています。 主要なものを簡単に紹介します。
oklch()：人間の知覚に合わせた色空間。明度を等差で並べても見た目の明るさが一定に感じられるcolor-mix()：2色を指定割合で混ぜた色を生成する関数lab()/lch()：HSLよりも広い色域（広色域ディスプレイ対応）
これらは2023〜2024年以降に主要ブラウザへ搭載された比較的新しい仕様です。 現時点で業務案件ではHEX/RGBA/HSLで十分ですが、広色域ディスプレイ前提のデザインや アクセシビリティを重視するプロジェクトではoklch()が注目されています。
まとめ
- HEXは「#」に続く16進数で赤・緑・青を0〜255の範囲で指定する、短く書ける定番形式
- RGBは同じ内容を10進数で書いたもの。RGBAなら末尾に透明度（0〜1）を指定できる
- HSLは色相・彩度・明度で書くため、色の微調整やテーマ設計に強い
- 用途別の目安：共有・コピペならHEX、半透明ならRGBA、パレット設計ならHSL
- 配色時はWCAGのコントラスト比（通常テキストでAA 4.5:1）を満たすか確認する
- HEX・RGB・HSLの相互変換は色コード変換ツールでブラウザ内完結で行える