カラーモデル徹底解説：コンピュータはどうやって虹色を表現してる？

一文で言うと

カラーモデルってのは、色を数値で表現するための標準化された仕組みのこと。これがあるから、スクリーンやプリンターみたいなデバイスが、同じ色をちゃんと作ったり共有したりできるんだ。

こいつが解決する問題

同じ色が #FF6347、rgb(255, 99, 71)、hsl(9, 100%, 64%) みたいに、なんで色々な書き方があるのか不思議に思ったことない？それは、色を表現するための「言語」が複数あって、それぞれが違う問題を解決するために生まれてきたからなんだ。

はじめに、ブラウン管（CRT）モニターがあった。あのデカくて重いヤツは、電子銃を蛍光スクリーンにぶち当てて画像を表示してた。銃は3つあって、それぞれ赤（Red）、緑（Green）、青（Blue）用。それぞれの銃の強さを変えることで、光を混ぜ合わせてあらゆる色を作り出していた。この物理的な仕組みが、RGBモデルを生み出したんだ。これはハードウェアへの直接的な命令セットみたいなもの。「(255, 0, 0)」は、「赤の銃を最大にして、緑と青はオフにしろ」って意味。マシンにとっては、すごくロジカルだった。

でも、人間にとってはロジカルじゃなかった。僕らは光線銃の強さなんて考えない。「もっと明るくて、彩度の高いオレンジが欲しい」って考える。このギャップが、HSL（Hue: 色相, Saturation: 彩度, Lightness: 輝度）のような、より直感的なモデルを生んだ。こっちの方が、アーティストやデザイナーが色をどう認識して、どういじりたいかに近いんだ。

一方、インクと紙の世界では、ルールが全く違った。スクリーンでは黒から始めて光を足していく（加法混色モデル）。紙では白から始めてインクで光を引いていく（減法混色モデル）。だから、こっちにはこっちの言語が必要だった。それが印刷の標準であるCMYK（Cyan: シアン, Magenta: マゼンタ, Yellow: イエロー, Key/Black: キープレート/黒）だ。

つまり、中心にある問題は「翻訳」なんだ。デザイナーは特定のブランドカラーをWebデベロッパーに伝えなきゃいけない。デベロッパーはその色がスクリーンで正しく見えるようにしなきゃいけない。そして印刷屋さんは、その色が名刺で正しく見えるようにしなきゃいけない。カラーモデルと、それらを変換するコンバーターは、これを可能にする万能翻訳機みたいなもの。デジタルと物理的なデザインの世界がカオスになるのを防いでくれてるんだ。

舞台裏ではどう動いてる？

カラーコンバーターの核心は、ある座標系の値を別の座標系の値に変換する一連の数式だ。華氏を摂氏に変換するようなものだと考えてみて。同じ物理的な現実を、違う目盛りで測ってるだけ。

RGB: 加法混色の小学校

これはすべてのスクリーンカラーの基礎だ。どれくらいの赤、緑、青の光を混ぜ合わせるかで色を定義する。

モデル: rgb(red, green, blue)
値: 各チャンネルは 0（その色なし）から 255（最大量）までの整数。
仕組み: 加法混色モデル。出発点は黒の rgb(0, 0, 0)。すべての色を最大強度で足すと、白の rgb(255, 255, 255) になる。

色	RGB値	解説
赤	`rgb(255, 0, 0)`	赤が最大で、緑と青はなし。
緑	`rgb(0, 255, 0)`	緑が最大で、赤と青はなし。
紫	`rgb(128, 0, 128)`	中程度の赤、緑はなし、中程度の青。
灰色	`rgb(128, 128, 128)`	3色すべてを中程度の同じ強さで混ぜる。

HEX: RGBの短縮エイリアス

HEX（16進数）コードは別のカラーモデルじゃない。単にRGB値を別の方法で書いているだけだ。HTMLやCSSでは、よりコンパクトだから人気がある。

モデル: #RRGGBB
仕組み: 2文字ずつのペアが、RGBの赤、緑、青のチャンネル値を表している。ただし、16進数（base-16）に変換されたものだ。16進数では、数字は 0 から F まで（A=10, B=11, ..., F=15）。00 は10進数で 0、FF は 255 になる。

// rgb(255, 99, 71) を HEX に変換する

// Red チャンネル: 255
// 255 / 16 = 15 あまり 15
// 16進数で 15 は 'F'。なので 255 = FF

// Green チャンネル: 99
// 99 / 16 = 6 あまり 3
// 16進数で 6 は '6', 3 は '3'。なので 99 = 63

// Blue チャンネル: 71
// 71 / 16 = 4 あまり 7
// 16進数で 4 は '4', 7 は '7'。なので 71 = 47

// 結果: #FF6347

#F0C のような3桁の短縮形は、単に #FF00CC のショートカットだ。

HSL & HSV: 「人間フレンドリー」なモデルたち

HSL（Hue: 色相, Saturation: 彩度, Lightness: 輝度）とHSV（Hue: 色相, Saturation: 彩度, Value: 明度）は、より直感的に扱えるように設計された。

色相 (Hue): 「色」そのもの。カラーホイール上の角度（0〜360度）で表現される。0°は赤、120°は緑、240°は青。
彩度 (Saturation): 色の強さや「純度」（0〜100%）。0%はグレースケール、100%はその色相で最も鮮やかな色。
輝度 (Lightness / HSL) / 明度 (Value / HSV): ここが両者の違い。
- 輝度 (Lightness / HSL): 黒から純色、そして白へのスケール。0%は常に黒、100%は常に白、そして50%が最も「純粋な」色。
- 明度 (Value / HSV): 黒から純色へのスケール。0%は常に黒だが、100%はその色で最も明るく、最も彩度の高い状態。

この違いは重要だ。HSLでは、彩度100%の青の輝度を100%にすると白になる。HSVでは、彩度100%の青の明度を100%にすると、鮮やかな青になる。デジタルアーティストは色を選ぶ際にHSVを好むことが多いが、CSSではHSLが一般的だ。

CMYK: 印刷界の減法混色のいとこ

このモデルは紙の上のインクのためのもの。白い表面から始めて、明るさを引いていく。

モデル: cmyk(cyan, magenta, yellow, key)
値: 各インクは0%から100%のパーセンテージで表される。
仕組み: 完璧な世界なら、C、M、Yを100%混ぜると黒になるはず。でも現実には、インクの不純物のせいで濁った茶色になる。だから、真の黒やシャープなテキストのため、そして高価な色付きインクを節約するために、K（Key、つまり黒）を追加する。RGBからCMYKへの変換は複雑だ。なぜなら、インクで再現できる色の範囲（「色域」または「ガモット」）は、スクリーンが表示できる範囲よりも狭いからだ。スクリーン上の超鮮やかな緑も、印刷するとくすんで見えるかもしれない。それは、その色を再現できるインクの組み合わせが存在しないからだ。

OKLCH: 知覚的に均一な、現代の挑戦者

こいつはHSLの大きな欠点を修正するために設計された、期待の新人だ。HSLの問題点は、黄色と青で「輝度」を10%変えたとき、明るさの知覚的な変化が全く違うこと。僕らの目は青よりも黄色に敏感なんだ。

OKLCHは「知覚的に均一」だ。これは、どの値を変更しても、色相に関係なく、人間の目には同じくらい意味のある変化に見えるということ。

L (Lightness): 色がどれだけ明るく見えるか（0〜100%）。HSLの輝度よりもずっと正確。
C (Chroma): 色がどれだけカラフルか（彩度に似ている）。
H (Hue): カラーホイール上の角度（0〜360）。

この特性のおかげで、スムーズで自然な感じのカラーパレットやグラデーションを作るのに信じられないほど役立つ。2つの色を選んで、OKLCH空間でその間のステップを見つけると、RGBやHSLで同じことをするよりずっと均一に見える結果が得られる。

実話にもとづく話

泥沼のブランドパレット事件

あるデザイナーが、新しいアプリのUIキットを構築していた。ブランドカラーは素敵な、鮮やかな紫 hsl(265, 80%, 50%)。ホバーステートやボーダー用に明るい色や暗い色を作るため、彼は単純に輝度（Lightness）の値を10%ずつ上下させた。明るい色はいい感じだったが、暗い色は…なんか変だった。灰色っぽくなって紫の「らしさ」を失い、まるで別の色みたいになってしまった。チームはなぜ色がこんなにバラバラに感じるのか困惑した。

教訓: HSLは知覚的に均一ではない。「輝度」を下げると、単に色が暗くなるだけでなく、彩度が下がったように見え、灰色に近づくことがある。調和のとれたカラースケールを作るには、OKLCHのような知覚的に均一な色空間を使うか、輝度と一緒に彩度も手動で調整するのがプロのやり方だ。

印刷 vs Webの大失敗

あるテックカンファレンスが、ウェブサイト、アプリ、SNSといったすべてのデジタルプレゼンスを、まばゆいばかりの蛍光ライムグリーン（#04FF00）でデザインした。エネルギッシュで、「最先端技術」を叫んでいるようだった。イベント用に、彼らは同じHEXコードを使って何千ドルものバナー、ストラップ、Tシャツを発注した。箱が届いたとき、そこには惨事が待っていた。鮮やかなライムグリーンは、くすんで色あせた豆のような緑色になっていた。安っぽく見え、エネルギッシュな雰囲気は完全に失われていた。

教訓: スクリーンのRGB/HEX色空間は、プリンターのCMYK空間よりも広い色域（色の範囲）を持っている。あの蛍光ライムグリーンは、インクの世界には単に存在しなかったのだ。常にターゲットとなる媒体のカラーモデル（印刷ならCMYK）に色を変換し、大量生産の前に物理的な校正刷りで確認すること。スクリーンがインクでどう見えるかを教えてくれると信じちゃダメだ。

アクセシブルじゃないボタンの危機

ある若手フロントエンドデベロッパーが、新しい設定ページを作るタスクを任された。デザインモックに従い、彼は白いアイコンが入った薄灰色のボタン（#E0E0E0）で、洗練されたインターフェースを作成した。彼の高コントラストモニターでは、クリーンでミニマルに見えた。コードは本番にプッシュされた。一週間後、サポートチケットが殺到し始めた。ユーザーから、ボタンのアイコンが見えないという苦情が寄せられたのだ。この色の組み合わせはコントラスト比が非常に低く、視覚障害のあるユーザーには判読不能で、低品質のスクリーンや明るい太陽光の下では誰にとっても見づらいものだった。

教訓: 色はアクセシビリティの核となる要素だ。あなた個人のコントラストの感じ方は、信頼できる指標ではない。常にツールを使って、前景と背景の色のコントラスト比がWCAG（ウェブコンテンツアクセシビリティガイドライン）の基準を満たしているかチェックすること。色をHSLやOKLCHのようなモデルに変換すれば、輝度やクロマを体系的に調整することで、準拠した代替案を見つけやすくなる。

よくある間違いと落とし穴

HEXを独自のカラーモデルだと考えること。 違う。あれは単にRGBをコンパクトに表現した16進数表記だ。#FFFFFF は rgb(255, 255, 255) と全く同じ。
CSSでCMYK値を使うこと。 color: cmyk(0, 100, 100, 0) なんてやっちゃダメ。一部のブラウザは推測してくれるかもしれないけど、Web標準じゃない。常にHEX、RGB、HSL、OKLCHのようなWebネイティブなカラーフォーマットを提供しよう。
HSLの 'L' だけを変えてカラースケールを作ること。 これは知覚的な明るさがバラバラなパレットへの典型的な道筋だ。同じ 'L' の値でも、黄色は青よりずっと明るく見えるだろう。
スクリーンの色が完璧に印刷されると思い込むこと。 ブランディングで最もよくある失望の源。RGBの色域はCMYKの色域より広い。あなたが見ているものが、紙の上で得られるものとは限らない。
HSLとHSVを混同すること。 似ているが、輝度/明度のスケールは、特に両極端で挙動が異なる。HSL値を操作するスクリプトは、HSVを操作するスクリプトとは違う結果を生む。これは、色生成ロジックにおいて、微妙だがイライラするバグにつながる可能性がある。

なぜ知っておくべきか

もしあなたが一行でもCSSを書いたり、UIをデザインしたり、データビジュアライゼーションを作成したり、ブランドのロゴを何かに載せたりするなら、あなたはカラーモデルを扱っている。これらを理解することは、単なる学術的なトリビアじゃない。効果的で、アクセシブルで、一貫したユーザー体験を創り出すための基本的なスキルなんだ。

以下のようなときに、カラーモデルについて考えるべきだ：

デザインシステムを実装し、ブランドカラーを定義するとき。
テーマ（例：ライトモード/ダークモード）を作成するとき。
UIがアクセシビリティのコントラスト要件を満たしていることを確認するとき。
プログラムでチャート、グラデーション、パレットを生成するとき。
デザイナーや印刷会社と協力して、メディアを横断した色の一貫性を確保するとき。

hsl(210, 50%, 95%)（薄い青の背景）をレガシーシステム用にHEXに変換する方法を知っていたり、なぜあなたのブランドの rgb(0, 255, 127) のスプリンググリーンがCMYKのパンフレット用に調整される必要があるのかを理解していることは、デザインの意図と技術的な現実の間のギャップを埋めることができる、バランスの取れたデベロッパーの証だ。

もっと深く知る

MDN: <color> - すべてのCSSカラータイプに関する、Webデベロッパーのための究極のリファレンス。構文やブラウザ互換性も網羅。
W3C CSS Color Module Level 4 - LCHやOKLCHのような新しいモデルを含む、モダンCSSのカラー構文を定義する公式仕様書。
Wikipedia: カラーモデル - 数十のカラーモデルの背後にある理論の包括的な概要。
OKLCH, explained - なぜOKLCHが存在し、それが古いカラーモデルをどのように改善するのかを解説した、素晴らしくインタラクティブな説明。（英語サイト）
Google Material Design: Understanding color - 主要なデザインシステムから学ぶ、UIデザインにおけるカラー理論と応用の実践的ガイド。（英語サイト）