Webカラーの変遷 ―
216色のパレットから「人間の知覚」の時代へ

「Webセーフカラー」をご存知ですか？

現代のWebデザイナーは、PhotoshopやFigmaのカラーピッカーを使って、直感的に好きな色を選び、それをそのままCSSの16進数（Hexコード）として書き出しています。しかし、Webの黎明期には「216色」しか確実な色が存在しない時代がありました。

1990年代半ば、多くのパソコンのモニターは最大256色しか表示できませんでした。しかも、WindowsとMacでシステムが予約している色が異なっていたため、両方のOSで「文字化け」ならぬ「色化け」を起こさずに表示できる色は、わずか216色に限られていたのです。これが「Webセーフカラー」です。

当時のデザイナーは、ブランドカラーを使いたくても「Webセーフカラーの中で一番近い色」で妥協するか、色が変わることを覚悟の上で指定するしかありませんでした。

16進数（Hex）の呪縛

やがてディスプレイの進化により、私たちは約1677万色を自由に使えるようになりました。そこで標準となったのが #3B82F6 のような16進数（Hex）カラーコードです。しかし、ここにも大きな問題がありました。Hexコードは「コンピューターのための言語」であって、人間にとっては直感的ではないのです。

コンピューターの色から、人間の色へ

なぜHSLでは、同じ明度を指定しても明るさが違って見えてしまうのでしょうか？ それは人間の目が、色によって明るさの感じ方が異なる（青より黄色の方を明るく感じる）からです。つまり、RGBもHSLも「ディスプレイという機械」の発光をベースにした色空間だったのです。

そこで現代のWebデザインに革命を起こしつつあるのが、OKLCHという新しい色指定です。oklch() は「人間の知覚」をベースに作られた色空間であり、ここで明度（L）を揃えれば、黄色であろうと青であろうと、人間の目には確実に同じ明るさとして認識されます。さらに、最新のディスプレイが持つ広色域（Display P3など）にも対応しています。

.button-primary {
  /* L(明度) C(彩度) H(色相) */
  background-color: oklch(60% 0.15 250);
}

.button-primary:hover {
  /* 色相と彩度はそのまま、明度だけを確実に10%下げる */
  background-color: oklch(50% 0.15 250);
}

次にカラーパレットを作るときに

216色しか使えなかった時代から、16進数の暗号のようなコードを経て、私たちはようやく「見た目通りの色」をコードで直接操作できる時代に辿り着きました。

デザインシステムの構築や、ダークモードとライトモードの配色設計において、OKLCHは強力な武器になります。次にCSSで色を指定するとき、使い慣れたHexコードから少し離れて、新しい色空間の世界を覗いてみませんか？ それは単なる技術のアップデートではなく、Webデザインがより「人間中心」になった証なのです。