公開：2025/08/12

更新：2025/09/16

第1回｜色指定のはじまりから今まで

1. Webカラーの出発点：名前付きカラー

1990年代初頭、HTMLで色を指定する方法はとても限られていました。
最初期のブラウザ（Mosaicや初期のNetscape）は、名前付きカラー（Named Colors）だけに対応。
たとえば、背景を赤にしたい場合はこう書きます。

<body bgcolor="red">

この頃は色の数も140色程度で、デザインの幅はとても狭いものでした。

📊 図1：HTML 4.0 Named Colors一覧（表や色チップ）

2. 16進数（Hex）の登場

やがて、より細かく色を指定できるように16進数表記が広く使われ始めます。

p {
  color: #ff0000; /* 赤 */
}
  • 形式：#RRGGBB（R, G, Bは0〜255の値を16進で表記）
  • #fff のように省略形も可能（#ffffff の短縮）

これにより、1677万色の指定が理論上可能になりました。
ただし、この色指定はsRGB前提であり、ブラウザ間での色の見え方はほぼ統一されましたが、人間の感覚的には扱いづらいものでした。

3. RGB関数とHSL表記

次に登場したのがRGB関数とHSL表記です。

/* RGB関数 */
color: rgb(255, 0, 0);

/* HSL表記 */
color: hsl(0, 100%, 50%);
  • RGB関数は直接R/G/Bの数値を指定
  • HSL（Hue, Saturation, Lightness）は、人間の直感に近い「色相・彩度・明度」で指定できる

HSLは配色バリエーション作りに便利でしたが、色空間としては知覚均等性がないため、「明度50%の青」と「明度50%の黄」が同じ明るさに見えない、といった問題がありました。

📊 図2：RGBとHSLの色空間モデルの比較図（立方体と円柱）

4. CSS Color Level 4の時代へ

CSS Color Module Level 4（2021年頃以降）で、新しい色空間や機能が加わります。

  • lab() / lch()
    人間の知覚に基づくLab空間と、その極座標バージョンLCH
  • 色関数の拡張
    rgb() や hsl() でカンマを使わない表記が可能に
  • 透明度の統一指定
    rgb(255 0 0 / 0.5) のようにスラッシュでアルファ値指定

📊 図3：CSS Color Level 4で追加された色関数一覧表

5. そしてOKLCHへ

OKLCHは、従来のLCHよりも知覚均等性が向上した色空間で、広色域ディスプレイや将来のWeb色管理に適しています。

  • 明度（L）が本当に「同じ明るさ」に感じられる
  • 広色域にも対応しやすい
  • 色の補間（アニメーションやグラデーション）が自然
color: oklch(60% 0.2 40);

ここまでの歴史を振り返ると、Webの色指定は「単純なコード化」→「直感的表現」→「知覚に基づく正確さ」という方向に進化してきたことがわかります。


第2回では、この進化を支える色空間の基礎について掘り下げます。

まとめ

  • Webの色指定は、名前付きカラー → Hex → RGB/HSL → Lab/LCH → OKLCHと進化
  • 新しい色空間は、見た目の均一性や広色域対応のために登場している
  • OKLCHは、今後のWeb配色の「新しい基準」になりうる