HEX vs RGB vs HSL：プロジェクトに最適なカラーフォーマットの選び方

Web開発におけるカラーコード

Web上で見るすべての色はコードで表現されています。これらのコードを理解することは、Web開発者やデザイナーにとって不可欠です。CSSを書くためだけでなく、デザイナーとのコミュニケーション、レイアウト問題のデバッグ、アクセシブルなインターフェイスの構築にも役立ちます。

日常的に使う主なカラーフォーマットは3つあります。HEX、RGB、HSLです。それぞれに長所と短所があり、どの場面でどれを使うかを知ることで作業が格段に楽になります。

HEXカラー

HEX（16進数）はWeb上で最も一般的なカラーフォーマットです。HTMLの初期から存在し、CSSファイル、FigmaやSketchなどのデザインツール、ブランドガイドラインなど至るところで目にします。

フォーマット：#RRGGBB

• 各ペアは赤、緑、青（0〜255）を表します
• 値は00（0）からFF（255）の範囲です
• #プレフィックスがHEXカラーであることをブラウザに伝えます

例

• #FF0000 = 純粋な赤
• #00FF00 = 純粋な緑
• #0000FF = 純粋な青
• #FFFFFF = 白
• #000000 = 黒

省略形

各ペアの数字が同じ場合は省略できます：#FF6633 → #F63

ブラウザが各桁を繰り返して展開するためです。#F63は#FF6633になります。ただし、#F37A21は各ペアの数字が異なるため省略できません。

アルファ付きHEX（透明度）

モダンブラウザは8桁のHEXコードをサポートしており、最後の2桁が不透明度を制御します：

color: #3B82F680;  /* 青、50%の不透明度 */

アルファ値80（16進数）は10進数で128に相当し、最大値255のおよそ50%です。よく使うアルファ値：

• FF = 100%（完全不透明）
• BF = 75%
• 80 = 50%
• 40 = 25%
• 00 = 0%（完全透明）

RGBカラー

RGBはRed（赤）、Green（緑）、Blue（青）の略です。各チャンネルに0〜255の10進数を使用するため、16進数表記よりも直感的に感じる人が多いです。

フォーマット：rgb(red, green, blue)

color: rgb(59, 130, 246);    /* 青 */
color: rgba(59, 130, 246, 0.5);  /* 50%透明の青 */

モダンなRGB構文

CSSにはrgba()を廃止し、オプションのアルファを持つrgb()だけにした新しい構文があります：

/* モダン構文 -- 現在のすべてのブラウザで動作 */
color: rgb(59 130 246);           /* カンマなし */
color: rgb(59 130 246 / 0.5);    /* スラッシュでアルファ */
color: rgb(59 130 246 / 50%);    /* パーセンテージでアルファ */

このクリーンな構文はすべてのモダンブラウザで完全にサポートされており、レガシーシステムをターゲットにしていなければ採用する価値があります。

RGBが有用な理由

RGBはプログラムで色を操作する必要がある場合に優れています。各チャンネルは0〜255の数値なので、JavaScriptや他のプログラミング言語で色を調整しやすいです：

// すべてのチャンネルを増やして色を明るくする
function lighten(r, g, b, amount) {
  return [
    Math.min(255, r + amount),
    Math.min(255, g + amount),
    Math.min(255, b + amount)
  ];
}

RGBはほとんどのカラーピッカーAPIや画像処理ライブラリのネイティブフォーマットでもあり、変換のオーバーヘッドを避けられます。

HSLカラー

HSLはHue（色相）、Saturation（彩度）、Lightness（明度）の略です。人間が実際に色について考える方法に近いため、より直感的です。

フォーマット：hsl(hue, saturation%, lightness%)

• 色相：0〜360（カラーホイール上の位置）
  • 0/360 = 赤
  • 120 = 緑
  • 240 = 青
• 彩度：0〜100%（グレーから鮮やか）
  • 0% = 完全に無彩色（グレー）
  • 100% = 完全に飽和（鮮明な色）
• 明度：0〜100%（黒から白）
  • 0% = 純粋な黒
  • 50% = 純粋な色
  • 100% = 純粋な白

color: hsl(217, 91%, 60%);   /* 青 */
color: hsl(0, 100%, 50%);    /* 赤 */
color: hsl(120, 100%, 50%);  /* 緑 */

HSLがデザインシステムに革命をもたらす理由

HSLの真の威力は、カラーバリエーションを作成するときに明らかになります。例えば、プライマリブランドカラーがhsl(217, 91%, 60%)だとします。完全なシェードパレットの構築は非常に簡単です：

:root {
  --blue-50:  hsl(217, 91%, 97%);   /* ほぼ白 */
  --blue-100: hsl(217, 91%, 93%);
  --blue-200: hsl(217, 91%, 84%);
  --blue-300: hsl(217, 91%, 72%);
  --blue-400: hsl(217, 91%, 60%);   /* ベースカラー */
  --blue-500: hsl(217, 91%, 50%);
  --blue-600: hsl(217, 91%, 40%);
  --blue-700: hsl(217, 91%, 30%);
  --blue-800: hsl(217, 91%, 20%);
  --blue-900: hsl(217, 91%, 10%);   /* ほぼ黒 */
}

同じ色相と彩度を保ち、明度だけを調整します。結果は統一感のあるシェードセットになります。HEXコードでこれをやろうとすると、計算ツールかデザインツールが必要になります。

HSLでカラーハーモニーを作る

色相はカラーホイール上の位置（0〜360度）なので、カラーハーモニーの作成は単純な算数です：

• 補色：色相に180を加える（hsl(217, 91%, 60%) → hsl(37, 91%, 60%)）
• トライアド：120と240を加える（hsl(217, ...)、hsl(337, ...)、hsl(97, ...)）
• アナログ：30を加減する（hsl(187, ...)、hsl(217, ...)、hsl(247, ...)）

これが多くのデザインシステムやCSSフレームワークが内部的にHSLを使用する理由の1つです。

アルファ付きHSL

RGBと同様に、HSLも透明度をサポートします：

color: hsl(217, 91%, 60%, 0.5);      /* 古い構文 */
color: hsl(217 91% 60% / 50%);       /* モダン構文 */

CSS名前付きカラー

CSSにはred、steelblue、papayawhip、rebeccapurpleなどの147の名前付きカラーもあります。プロトタイプや簡単なデモには便利ですが、本番コードではほとんど見かけません。理由は：

• 柔軟性がない（明度や不透明度を簡単に調整できない）
• 名前が誤解を招くことがある（darkgrayは実際にはgrayより明るい）
• ブランドカラーが名前付きカラーとぴったり一致することはない

ただし、transparentとcurrentColorは本当に有用な2つの名前付き値です。currentColorは現在のテキストカラーを継承するため、周囲のテキストに合わせるべきSVGアイコンやボーダーに便利です。

それぞれをいつ使うか

フォーマット	最適な用途
HEX	クイックインラインカラー、大部分のCSS、ブランドガイドライン
RGB/RGBA	プログラムによる色操作、キャンバス処理
HSL/HSLA	デザインシステム、シェードパレットの作成、テーマ

実践的なおすすめ：新しいプロジェクトのデフォルトとしてHSLを使用しましょう。テーマカラーをHSLカスタムプロパティとして定義することで、明度の値を調整するだけでライト/ダークモードの切り替えが簡単になります。デザインツールから色を貼り付ける際はHEXで問題ありません。変数にはHSLに変換しましょう。

カラー変換の計算式

HEXからRGBへ

6桁の16進数文字列を3つのペアに分割し、それぞれを16進数から10進数に変換します：

#3B82F6 → 3B = 59, 82 = 130, F6 = 246 → rgb(59, 130, 246)

RGBからHSLへ

この変換はより多くの計算が必要です。大まかな手順：

1. R、G、Bを0〜1の範囲に正規化（255で割る）
2. 最大値と最小値を見つける
3. 明度 = (最大 + 最小) / 2
4. 最大と最小が等しければ彩度は0（グレー）
5. そうでなければ明度に基づいて彩度を計算
6. どのチャンネルが最大かに基づいて色相を計算

これを暗記する必要はありません。ツールを使いましょう。ただし、関係性を理解することで色の問題をデバッグしやすくなります。

よくあるカラーの間違いとその回避方法

1. コントラスト比を無視する

WCAG 2.1は通常テキストで最低4.5:1、大きなテキストで3:1のコントラスト比を要求しています。白い背景に薄いグレーのテキストはモックアップではエレガントに見えるかもしれませんが、アクセシビリティ基準に違反し、直射日光下や安価なモニターでは本当に読みにくいです。

2. 純粋な黒を純粋な白の上に使う

#000000を#FFFFFFの上に使うと最大コントラスト（21:1）が生まれますが、長時間の読書では目が疲れることがあります。多くのデザインシステムでは#1a1a1aを#FAFAFAの上に使うという、より柔らかい組み合わせを使用しています。これでもWCAG AAAをパスしつつ、目に優しい組み合わせです。

3. コンテキストで色をテストしない

小さなスウォッチとして素晴らしく見える色が、大きな背景エリアに適用されると圧倒的になることがあります。常に実際のスケールで色をテストしましょう。コミットする前に、背景色で画面全体を塗りつぶし、その上に実際のテキストを置いてみてください。

4. 使いすぎる色

よくある初心者の間違いは、あまりにも多くの異なる色を使うことです。プロのサイトのほとんどは2〜3のプライマリカラーと中間色のパレット（グレー）に絞っています。6つ目や7つ目の異なる色相に手を伸ばしていると感じたら、一歩引いてシンプルにしましょう。

5. 色だけで情報を伝える

情報を伝えるための唯一の手段として色を使わないでください。エラーメッセージが赤いテキストだけでマークされている場合、色盲のユーザー（男性の約8%）は見逃してしまいます。常に色とアイコン、パターン、またはテキストラベルを組み合わせて使用してください。

実際のカラーワークフロー

ほとんどのWebプロジェクトでうまく機能する実践的なワークフローを紹介します：

1. プライマリ色相を選ぶ（例：hsl(217, 91%, 60%)）
2. 明度を5%から97%まで変化させてシェードスケールを生成する
3. プライマリ色相のヒントを持つニュートラルグレーを選ぶ（例：hsl(217, 10%, 50%)）
4. 同じ方法でグレーシェードを生成する
5. アクセントカラーを控えめに追加する（成功用の緑1つ、エラー用の赤1つ、警告用のアンバー1つ）
6. すべてのテキスト/背景の組み合わせのコントラストを確認する
7. すべてをCSSカスタムプロパティとして定義する（テーマの切り替えが楽になる）

:root {
  --primary: hsl(217, 91%, 60%);
  --primary-light: hsl(217, 91%, 93%);
  --primary-dark: hsl(217, 91%, 35%);
  --text: hsl(217, 15%, 15%);
  --text-muted: hsl(217, 10%, 45%);
  --surface: hsl(217, 20%, 98%);
  --error: hsl(0, 72%, 51%);
  --success: hsl(142, 71%, 45%);
}

以下でカラーを調整して、同じ色がHEX、RGB、HSLフォーマットでどのように表現されるかを確認してみましょう：

今すぐ色を変換する

カラーピッカー＆コンバーターを使用して、HEX、RGB、HSL、RGBAを即座に変換できます。また、カラーコントラストチェッカーでコントラスト比も確認できます。