カラーフォーマット解説：HEX、RGB、HSL変換ガイド

画面上のすべてのピクセルは数値で定義されています。しかし同じ色を複数のフォーマットで表現できます — HEX、RGB、HSL、HSBなど。これらのフォーマットとその使い分けを理解することで、より効果的な開発者・デザイナーになれます。

カラーモデル

RGB（赤、緑、青）

RGBは画面の仕組みに基づく加法混色モデルです。各ピクセルはさまざまな強度の赤、緑、青の光の組み合わせです。

color: rgb(59, 130, 246);       /* ソリッドブルー */
color: rgba(59, 130, 246, 0.5); /* 50%透明なブルー */

各チャンネルは0（なし）から255（最大強度）の範囲です：

rgb(0, 0, 0) = ブラック（光なし）
rgb(255, 255, 255) = ホワイト（すべての光）
rgb(255, 0, 0) = 純粋な赤

RGBの使用場面：プログラム的な色操作、Canvasの操作、画像処理。RGBはハードウェアに直接マッピングされるため、計算が直感的です。

HEX（16進数）

HEXはRGBを16進数表記で書いたものです。各文字ペアが1つのチャンネルを表します（00-FF）：

color: #3B82F6;   /* rgb(59, 130, 246)と同じブルー */
color: #3B82F680; /* 50%アルファ（8桁hex） */

変換は直接的です：3B = 59、82 = 130、F6 = 246。

ショートハンド：各ペアが同じ数字の場合、短縮できます：#AABBCC → #ABC

HEXの使用場面：CSSスタイルシート（最も一般的な形式）、デザインハンドオフ、ブランドガイドライン。HEXはコンパクトで広く理解されています。

HSL（色相、彩度、明度）

HSLは人間が色を知覚する方法で色を表現します。光チャンネルを混合する代わりに、色のプロパティで記述します：

色相：カラーホイール上の角度（0-360°）。0° = 赤、120° = 緑、240° = 青
彩度：色の鮮やかさ（0% = グレー、100% = フルカラー）
明度：色の明るさ（0% = ブラック、50% = 純粋な色、100% = ホワイト）

color: hsl(217, 91%, 60%);       /* 同じブルー */
color: hsla(217, 91%, 60%, 0.5); /* アルファ付き */

HSLの使用場面：カラーパレットの作成、プログラム的な色調整（例：明度を調整してホバー状態を作成）、アクセシブルなカラーデザイン。HSLは人間が色について考える上で最も直感的なフォーマットです。

HSB/HSV（色相、彩度、明るさ/値）

HSBはHSLに似ていますが、明るさの定義が異なります。最大の明るさでは純粋な色が得られ、最小ではブラックになります。このモデルはFigma、Sketch、Photoshopなどのデザインツールで使用されています。

HSLとの主な違い：HSLでは明度50%で純粋な色が得られます。HSBでは明るさ100%で純粋な色が得られます。これによりHSBは一部のタスクではより直感的ですが、CSSではあまり有用ではありません（CSSはHSBをネイティブサポートしていません）。

フォーマット間の変換

フォーマット間の変換は簡単な計算で行えます。主な関係は以下の通りです：

HEXからRGB

hex文字列をペアに分割し、それぞれを10進数に変換：

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

RGBからHSL

アルゴリズムはRGB値を0-1に正規化し、最大値と最小値のチャンネルを見つけ、支配的なチャンネルに基づいて色相を計算し、範囲から彩度を、平均から明度を計算します。

手動で変換を実装するよりも、カラーコンバーターを使ってフォーマット間を即座に変換できます。

実践的な応用

HSLによるカラーパレットの構築

HSLは一貫したパレット生成に優れています。色相を一定に保ち、彩度と明度を変化させます：

:root {
  --blue-100: hsl(217, 91%, 95%);  /* 最も明るい */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* ベース */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* 最も暗い */
}

このアプローチは知覚的に一貫したステップを保証します。手動でフルパレットを作成するなら、カラーパレットジェネレーターがこのプロセスを自動化します。

ホバーとフォーカス状態

HSLを使えば、インタラクティブな状態の作成は簡単です：

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 5%暗く */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 10%暗く */
}

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

WCAG 2.1では通常テストに最低4.5:1、大きなテキストに3:1のコントラスト比が必要です。HSLの明度コンポーネントは十分なコントラストを確保するための直感的な方法を提供します：

明るい背景（明度 > 90%）は暗いテキスト（明度 < 30%）とよく合います
暗い背景（明度 < 20%）は明るいテキスト（明度 > 80%）とよく合います

モダンCSSカラー関数

CSSは強力な色操作関数をサポートするようになりました：

/* 相対カラー構文（CSS Color Level 4） */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - 知覚的に均一なカラースペース */
color: oklch(0.7 0.15 250);

oklch フォーマットは知覚的に均一であるため採用が進んでいます — 等しい数値の変更が等しい知覚的変化を生み出します。HSLでは異なる色相値で10%の明度変更が異なって見えるのとは対照的です。

FAQ

CSSではどのカラーフォーマットを使うべきですか？

ほとんどのプロジェクトでは、シンプルな色にはHEXを、バリエーションの作成やプログラム的な色操作が必要な場合にはHSLを使用してください。HEXは最もコンパクトで広く認識されているフォーマットです。HSLはカラーシステムを構築する際により読みやすいです。モダンCSSはすべてのフォーマットを相互に交換可能にサポートしています。

HSLとHSBの違いは何ですか？

HSLとHSBはどちらも色相と彩度を使用しますが、明るさの定義が異なります。HSLでは明度0%がブラック、50%が純粋な色、100%がホワイトです。HSBでは明るさ0%がブラック、100%が純粋な色です（明るさだけではホワイトにはなりません）。CSSはHSLをネイティブサポートしています。HSBは主にFigmaやPhotoshopなどのデザインツールで使用されています。