カラーモデルとは何か？
カラーモデルとは、色を数値のタプルで表現する数学的な体系です。「暖かみのあるオレンジレッド」と説明する代わりに、デザイナーは #FF4500、rgb(255, 69, 0)、hsl(16, 100%, 50%) などの表記で正確に伝えることができます。あいまいさがなく、再現可能で、ツールやチームを問わず伝達できます。
正確な色彩記述の必要性は古くから存在します。1666 年、アイザック・ニュートンはガラスのプリズムに白色の太陽光を通して虹のスペクトルを作り出し、「白い光」にはすべての可視光が含まれることを証明しました。しかしスペクトルだけでは、色を体系的に混合したり指定する方法はわかりません。
最初の実用的な色彩秩序体系は、1905 年にアルバート・マンセルが生み出しました。彼は色を色相（Hue）・明度（Value）・彩度（Chroma）の 3 軸で整理し、知覚的な樹状構造を作りました。この体系が HSL と HSV の直接の祖先です。
1931 年、国際照明委員会（CIE）が CIE 1931 XYZ 色空間を発表しました。これは人間の観察者による配色実験から導かれた、数学的に厳密でデバイスに依存しない最初の色彩記述標準です。コンピューティングで使われるすべてのカラーモデルは、最終的にこの標準に行き着きます。
デジタル時代はハードウェア主導のモデルをもたらしました。CRT モニターは赤・緑・青の蛍光ドットを混合して発光し（RGB）、インクジェットプリンターはシアン・マゼンタ・イエロー・ブラックのインクを噴射します（CMYK）。各媒体には独自のモデルが必要であり、それらを変換する需要が、今あなたが使っているようなツールを生み出しました。
RGB —— スクリーンの言語
RGB（赤・緑・青）は加法混色モデルです。光を重ねるほど明るくなり、三チャンネルすべてが最大値（255, 255, 255）になると白、すべてゼロになると黒になります。これはモニター、テレビ、スマートフォン画面の仕組みとまったく同じです——何百万もの画素が赤・緑・青のサブ画素で構成され、それぞれが異なる強度で発光しています。
各チャンネルの範囲は 0〜255（8 ビット、256 段階）です。256³ = 16,777,216 種類の色が表現でき、これが「24 ビットトゥルーカラー」と呼ばれるものです。HDR ディスプレイでは 1 チャンネル 10 ビット（1024 段階）が標準になりつつあります。
RGB は CSS、Canvas API、WebGL シェーダー、画像処理ライブラリのネイティブな言語です。弱点は直感的でない点です。青をわずかに明るくしたいとき、どの数値を変えればよいかは直感的にはわかりません。
HEX —— ウェブのコンパクトな色表記
HEX は RGB を 16 進数でエンコードしたものです。各チャンネル（10 進 0〜255）が 2 桁の 16 進文字列（00〜FF）になり、全体に # が付きます。
255 十進 = FF 十六進
128 十進 = 80 十六進
0 十進 = 00 十六進
rgb(255, 128, 0) は #FF8000 になります。コンパクトで貼り付けやすく、HTML・CSS・デザインツールのスウォッチで広く使われています。
各チャンネルの 2 桁が同じ場合は短縮形が使えます：#FF8800 → #F80。CSS では透明度を伴う色を表すための 8 桁形式 #RRGGBBAA（例：#FF800080 = 50% 透明のオレンジ）もサポートされています。
HEX は開発者に便利ですが、RGB よりも意味的に明確なわけではありません。カラーピッカーなしで値を調整するのは依然として試行錯誤です。
HSL —— 人間のために設計されたモデル
HSL（色相・彩度・明度）は人間の直感に合う形で色空間を再構成します：
- 色相 H：色相環の角度、0°〜360°。赤 = 0°、黄 = 60°、緑 = 120°、シアン = 180°、青 = 240°、マゼンタ = 300°、再び赤 = 360°。
- 彩度 S：0%〜100%。0% ですべての色はグレーになり、100% は最も鮮やかな色になります。
- 明度 L：0%〜100%。0% は常に黒、100% は常に白、50% が「純粋な」色相です。
これによりデザイン操作が自然になります：*「この色を 20% 明るくしたい」*なら L: 50% を 70% にするだけです。CSS hsl() はデザインシステムで広く使われており、算術演算でコンポーネントレベルの色調整が可能です。
HSL は RGB キューブを円柱状に再マッピングしたものです。変換は計算的に軽量ですが、知覚上の弱点があります：hsl(60, 100%, 50%)（黄）は hsl(240, 100%, 50%)（青）より明るく見えますが、どちらも L 値は同じ 50% です。知覚的均一性が必要な場合は Lab や oklch を使いましょう。
HSV / HSB —— Photoshop のモデル
HSV（色相・彩度・明度値）は HSB（Hue, Saturation, Brightness）とも呼ばれ、構造的に HSL に似ていますが、明度（Lightness）の代わりに**明度値（Value）**を使います：
- Value V：0%〜100%。V=0% のとき H と S に関わらず常に黒。V=100% のとき最高輝度（白とは限りません）。
実質的な違い：HSL では純粋な色は L=50% にあり、HSV では V=100%、S=100% にあります。HSL で L を 50% 以上にすると白が加わり（淡くなる）、HSV にはネイティブな淡色化操作がなく、S を下げることで白を加えます。
Adobe Photoshop、Illustrator などのほとんどのプロカラーピッカーは HSV/HSB を使用しています。「フル輝度」モデルは鮮やかな色を選ぶときに直感的です。デザイナーはパレット作成に HSV を好み、開発者は CSS 操作に HSL を好む傾向があります。
CMYK —— 印刷モデル
CMYK（シアン・マゼンタ・イエロー・キー（ブラック））は減法混色モデルです。加色モデルの RGB（光を重ねると白）とは異なり、减法モデルは紙の上のインクで機能します——各インクは特定の波長を吸収（減算）し、反射された光が見える色になります。
- シアン：赤を吸収、青+緑を反射
- マゼンタ：緑を吸収、赤+青を反射
- イエロー：青を吸収、赤+緑を反射
- ブラック（キー）：影の深みを改善し、インクコストを節約（CMY の混合では真の黒が出にくい）
各チャンネルは 0〜100% のパーセンテージで表されます。CMYK はオフセット印刷、パッケージ、雑誌など、紙にインクを刷るすべての媒体の標準です。
重要な警告：RGB と CMYK は完全には互換性がありません。 多くの鮮やかな RGB 色（蛍光グリーン、エレクトリックブルー）は CMYK の色域外にあり、印刷時にくすんだ色になります。印刷所にファイルを送る前に必ず CMYK で校正してください。
CIE L*a*b* —— 知覚的均一性
Lab（CIELAB）は、数値的な距離が等しければ知覚的な色差も等しくなるよう設計されたデバイス非依存の色空間です。以前のモデルの知覚的非均一性を解決するため、CIE が 1976 年に作成しました。
- L*：明度、0（黒）〜 100（白）
- a*：緑（負）〜赤（正）、おおよそ −128〜+127
- b*：青（負）〜黄（正）、おおよそ −128〜+127
Lab は色彩科学のゴールドスタンダードで、画像編集（Photoshop の Lab モード）や色差計算（ΔE）に使われます。ΔE < 1 は人間の目では判別不可能、ΔE < 3 はほとんどの印刷作業で許容範囲です。
Lab は現代 CSS oklch() の基盤であり、極座標系（明度・彩度・色相）で再包装され、より扱いやすくなっています。
RGBA と HSLA —— 透明度の追加
RGB と HSL はどちらもアルファチャンネルをサポートします——0（完全透明）〜 1（完全不透明）の 4 番目の値で、RGBA と HSLA を形成します。
rgba(255, 99, 71, 0.5) /* トマト色、50% 不透明 */
hsla(9, 100%, 64%, 0.7) /* 同色、70% 不透明 */
モダン CSS ではスラッシュ構文も使えます：rgb(255 99 71 / 50%)。アルファ合成は Porter-Duff の「over」演算に従い、レイヤーの色と背後のコンテンツをアルファ値に従ってブレンドします。
数学的変換公式
RGB ↔ HEX
// RGB を HEX に変換
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(v).toString(16).padStart(2, '0'))
.join('');
}
// HEX を RGB に変換
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
RGB ↔ HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // 無彩色
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}
色空間とプロファイル
色空間とは、デバイスやファイルが表現できる可視色のサブセットを定義するものです：
| 色空間 | カバー範囲 | 主な用途 |
|---|---|---|
| sRGB | 可視光の約 35% | Web・標準モニター・JPEG |
| Adobe RGB | 可視光の約 50% | プロ写真・印刷 |
| Display P3 | 可視光の約 45% | iPhone・Mac・最新ディスプレイ |
| ProPhoto RGB | 可視光の約 90% | RAW 写真編集 |
| Rec. 2020 | 可視光の約 75% | HDR 映像・4K 放送 |
Web デザイナーの大多数は sRGB で作業します。これは CSS、PNG、JPEG のデフォルト色空間です。ただし、Safari と Chrome は広色域ディスプレイ向けに color(display-p3 ...) CSS 関数と oklch() 関数をサポートするようになっています。
ICC プロファイルはカラー数値を実際の光にどう対応させるかをソフトウェアに伝えるデータファイルです。画像を「プロファイル埋め込みで」書き出すと、ICC プロファイルがファイルに付随し、デバイス間で一貫したレンダリングを確保します。
CSS でのカラー活用
CSS は基本的な HEX 値から豊かなカラーエコシステムへと進化しました：
:root {
--primary: #3B82F6;
--primary-hsl: hsl(217, 91%, 60%);
/* P3 広色域向け oklch */
--accent: oklch(70% 0.2 250);
}
.text-accessible {
color: #1a1a1a; /* 白背景で 16.1:1 — AAA レベル */
background: #ffffff;
}
名前付き色：CSS は aliceblue から yellowgreen まで 140 種類の名前付き色を定義しています。可読性は高いですが、体系的なデザインへの柔軟性は低いです。
モダン関数：
rgb(255 99 71)— スペース区切りの現代構文hsl(9deg 100% 64%)— 可読で調整しやすいoklch(70% 0.2 250)— 知覚的均一、広色域対応color(display-p3 1 0.389 0.279)— 明示的な広色域
CSS カスタムプロパティ（変数）はモダンテーミングの礎石です。HSL ベースの変数なら、算術演算で完全なカラースケールを生成でき、ダークモードの切り替えも優雅に実現できます。
アクセシビリティとコントラスト比
WCAG（Web Content Accessibility Guidelines）は読みやすいテキストのコントラスト比要件を定義しています：
- AA レベル：通常テキスト 4.5:1、大きなテキスト 3:1（18pt または 14pt 太字）
- AAA レベル：通常テキスト 7:1、大きなテキスト 4.5:1
コントラスト比は相対輝度から計算します：
コントラスト比 = (L1 + 0.05) / (L2 + 0.05)
L1 が明るい方、L2 が暗い方の輝度です。
一般的な安全な組み合わせ：黒（#000000）on 白（#ffffff）= 21:1（完璧な AAA）；#767676 グレー on 白 = ちょうど 4.5:1（AA 合格）。
デザインツールでのカラー処理
Figma：内部では RGB で色を保存します。カラーピッカーは HEX、RGB、HSL、HSB、CSS 表記を提供します。デザイントークン（変数）は Figma の Variables API を通じてコードに公開でき、CSS カスタムプロパティや JSON として書き出せます。
Sketch：RGB の名前付きスウォッチと共有カラーライブラリを使用。印刷用 CMYK エクスポートもサポート。Stark などのプラグインで WCAG コントラストチェックが可能です。
Adobe Photoshop / Illustrator：CMYK、Lab、カラープロファイル対応のワークフローをネイティブサポート。Photoshop のカラーピッカーは HSB（HSV）をデフォルトとします。Illustrator の「アートワークを再配色」はパレット調整に HSB を使います。
ユースケース：ブランド、トークン、クロスメディア一貫性
ブランドガイドラインは組織の権威ある色セットを定義します。完全なブランドカラー仕様は次のようになります：
Pantone 286 C
CMYK: 100 / 72 / 0 / 18
RGB: 0 / 84 / 166
HEX: #0054A6
このマルチフォーマット仕様により、T シャツへのシルクスクリーン印刷でも、パンフレット印刷でも、ウェブサイト表示でも、ブルーが一貫して見えるようになります。
デザイントークンはセマンティックな役割をカラー値にマッピングする名前付き変数です。Style Dictionary などのツールでトークンをプラットフォーム固有のファイルに変換できます：Web 向け CSS 変数、iOS 向け Swift 定数、Android 向け XML リソースなど。
比較：HSL vs HSV、sRGB vs 広色域
HSL vs HSV：どちらも RGB から派生しており、知覚的均一性はありません。HSL の純色は L=50% にあり、HSV の純色は V=100%、S=100% にあります。HSV はカラーピッカー UI に適しており、HSL は CSS 操作に適しています。真の知覚的均一性には oklch/Lab を使いましょう。
sRGB vs 広色域：sRGB は CIE 1931 の可視色の約 35% をカバーし、ほとんどの Web 作業に十分です。Display P3 は約 45% をカバーし、最新の Apple/Samsung スクリーンでより鮮やかな緑と赤が表示できます。CSS @media (color-gamut: p3) でプログレッシブエンハンスメントが可能です。
カラーマネジメントのベストプラクティス
- 色空間を早期に決定する——sRGB をデフォルトとし、P3 へ漸進的に拡張する。
- CSS 変数には HSL を使う——数学的なシェードスケール生成とテーマ切替が容易。
- ブランドカラーは複数フォーマットで指定——Pantone・CMYK・RGB・HEX を揃える。
- すべてのテキスト・背景の組み合わせで WCAG コントラストを確認。
- 書き出し画像には ICC プロファイルを埋め込む。
- デザインシステムでは生の HEX よりセマンティックトークンを優先。
- ダークモードでカラーをテスト：HSL ベースの変数でダークモードのテーマ化が優雅になります。
- RGB = CMYK と思い込まない：重要なカラーアセットは印刷会社と校正を確認する。
- モダン CSS には oklch を検討——知覚的均一性と広色域サポートを兼ね備える。
- カラーの決定を文書化する：アクセシビリティの根拠、ブランドの歴史、感情的な意図を記録する。
よくある質問
Q1：HEX と RGB の違いは何ですか？
同じ情報を異なる方法で表現しています。#FF8000 と rgb(255, 128, 0) はまったく同じ色です。HEX は 16 進数を使っているだけです。HEX の方がコンパクトで、RGB は大きな数値をより直感的に読めます。
Q2：RGB の色を印刷したら違う色に見えるのはなぜですか？ 画面は加法混色（発光）、印刷は減法混色（インク）です。多くの鮮やかな画面の色——特にエレクトリックブルーや蛍光グリーン——はインクで再現できず、最も近い印刷可能な色に「色域マッピング」されてくすんで見えます。
Q3：HSL と HSV はどちらを使うべきですか？ CSS 記述やデザイントークン構築には HSL を使いましょう。Photoshop/Illustrator のカラーピッカーやカスタムカラーピッカーコンポーネントの構築には HSV を使いましょう。
Q4：oklch とは何ですか？HSL より優れているのはなぜですか？
oklch は Oklab 知覚色空間を使う CSS カラー関数です。HSL とは異なり、色相をまたいで一貫した知覚的な明度を保ち、広色域の Display P3 色もサポートします。
Q5：2 つの色のコントラストが十分かどうかをどうやって確認しますか？
各色の相対輝度を計算し、(明るい方 + 0.05) / (暗い方 + 0.05) を適用します。WCAG AA を満たすには結果が 4.5 以上である必要があります。本ツールにはコントラストチェッカーが内蔵されています。
Q6：このツールの RGB→CMYK 変換は正確ですか？ 数学的変換はデバイス非依存の近似値です。プロの印刷作業には、プリンターと用紙に固有の ICC カラープロファイルが必要です。本ツールは見積もり参考に適しています；本番印刷前には必ず印刷業者に校正を確認してください。