HEX、RGB、HSL：Webカラーコードの理解
Webサイトを編集していてCSSに#FF5733を見つける。デザイナーがrgb(255, 87, 51)を送ってくる。デザインツールが色をhsl(11, 100%, 60%)と表示する。これらはすべてまったく同じ色（鮮やかな赤みのオレンジ）を表していますが、3つの異なる形式で記述されています。
Webカラーコードに混乱したことがあるなら、このガイドで5分ですっきりするでしょう。
デジタルカラーの仕組み
画面上のすべての色は、光の三原色を混合して作られます：赤（Red）、緑（Green）、青（Blue）。これがRGBカラーモデルです。各チャンネルの強度をゼロ（オフ）から最大（フル輝度）まで変化させることで、標準ディスプレイが表示できる約1670万色のいずれかを作成できます。
- Red 255、Green 0、Blue 0 = 純粋な赤
- Red 0、Green 255、Blue 0 = 純粋な緑
- Red 0、Green 0、Blue 255 = 純粋な青
- Red 255、Green 255、Blue 255 = 白（全チャンネルがフル）
- Red 0、Green 0、Blue 0 = 黒（全チャンネルがオフ）
- Red 255、Green 255、Blue 0 = 黄（赤 + 緑）
Webで使用されるすべてのカラー形式は、これらのチャンネル値を表現する異なる方法にすぎません。
ご存知ですか？ 1670万色という数字は、3つのチャンネルにわたるチャンネルあたり256レベル（0〜255）に由来します：256 × 256 × 256 = 16,777,216の可能な色。
HEXカラー
見た目
#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF
仕組み
HEXカラーコードは、ハッシュ記号に続く6文字の文字列です。6文字は3つのペアに分かれ、それぞれが16進数（基数16）でカラーチャンネルを表します：
| ペア | チャンネル | 範囲 |
|---|---|---|
| 最初の2文字 | 赤 | 00〜FF |
| 中央の2文字 | 緑 | 00〜FF |
| 最後の2文字 | 青 | 00〜FF |
16進数は数字0〜9と文字A〜Fを使用し、A=10、B=11、C=12、D=13、E=14、F=15です。つまり16進数のFFは10進数の255（15 × 16 + 15 = 255）に等しくなります。
#FF5733の分解：
- FF = 赤が255（最大値）
- 57 = 緑が87
- 33 = 青が51
これにより鮮やかな赤みのオレンジが生成されます。
省略形
各ペアが同じ2文字の場合、3文字の省略形を使用できます：
#FF0000は#F00と書ける#3366FFは#36Fと書ける#000000は#000と書ける
ヒント HEXコードはWeb開発で最も広く使われている形式です。1つだけ覚えるなら、これを覚えましょう。
RGBカラー
見た目
rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)
仕組み
RGB表記は、赤、緑、青のチャンネル値を0〜255の10進数で直接記述します。各チャンネルの強度に数値が直接対応するため、最も直感的な形式です。
rgb(255, 87, 51)の意味：
- 赤： 255（最大値）
- 緑： 87（約3分の1）
- 青： 51（約5分の1）
RGBA：透過の追加
RGBAは不透明度（アルファ）の4番目の値を追加します。0（完全に透明）から1（完全に不透明）の範囲です：
rgba(255, 87, 51, 0.5) /* 50%透過 */
rgba(0, 0, 0, 0.8) /* 80%不透明の黒 */
これはオーバーレイ、影、背後のコンテンツを表示する必要があるデザイン要素に便利です。
HSLカラー
見た目
hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)
仕組み
HSLはHue（色相）、Saturation（彩度）、Lightness（明度）の頭文字です。赤/緑/青のチャンネル混合で考える代わりに、HSLは人間が自然に色について考える方法で色を記述します。
色相は色そのもので、カラーホイール上の角度（0〜360）で表されます：
- 0° / 360° = 赤
- 60° = 黄
- 120° = 緑
- 180° = シアン
- 240° = 青
- 300° = マゼンタ
彩度は色の鮮やかさで、0%（灰色）から100%（完全に鮮やか）。
明度は色の明るさまたは暗さで、0%（黒）から100%（白）。50%が「通常」の明度です。
hsl(11, 100%, 60%)の意味：
- 色相： 11°（やや橙がかった赤）
- 彩度： 100%（完全に鮮やか）
- 明度： 60%（通常よりやや明るい）
ご存知ですか？ HSLは最もデザイナーフレンドリーなカラー形式と考えられています。色を自然に記述する方法にマッピングされるからです。「もう少し明るく」はL値を上げることを意味します。「鮮やかさを抑えて」はS値を下げることを意味します。「青寄りにして」はH値を変えることを意味します。HEXやRGBでは、これらの調整に複数の値を同時に変更する必要があります。
HSLA：透過の追加
RGBAと同様に、HSLAはアルファチャンネルを追加します：
hsla(11, 100%, 60%, 0.5) /* 50%透過 */
どの形式をいつ使うか
| 形式 | 最適な用途 | 利点 |
|---|---|---|
| HEX | CSSスタイルシート、デザイン仕様 | コンパクト、広く理解されている |
| RGB | プログラムによる色操作 | 直感的なチャンネル値 |
| HSL | デザイン作業、カラースキーム作成 | 人間の色知覚に合致 |
Web開発向け
HEXがデファクトスタンダードです。ほとんどのCSSはHEXコードで書かれています。コンパクトですべての開発者が認識できるからです。
デザインシステム向け
HSLは一貫したカラーパレット作成に最適です。ブランドカラーの明るいバリエーションと暗いバリエーションを作るには、明度値を調整するだけです：
- プライマリ：
hsl(210, 80%, 50%) - ライトバリアント：
hsl(210, 80%, 70%) - ダークバリアント：
hsl(210, 80%, 30%)
色相と彩度は同じままなので、バリエーションが異なる明るさで同じ「色」であることが保証されます。
透過が必要な場合
半透明の色をオーバーレイ、影、ガラス効果に使用する場合は、RGBAまたはHSLAを使用します。
形式間の変換
形式間の変換が頻繁に必要になります。デザイナーがHSL値を送ってきたがコードベースはHEXを使っている。ブランドガイドがRGBを指定しているがバリアント作成にHSLが必要。
計算は簡単ですが手作業では面倒です。変換ツールを使えば即座に処理できます。
ヒント HEX、RGB、HSLなどの間で変換：カラーコードの変換方法。任意の形式で任意の色を入力すると、他のすべての形式が即座に取得できます。
色の作業を始めましょう：
すべてのツールは無料で、ブラウザで直接動作します。