Webセーフカラーとは？216色が使われた理由と現在の扱い
Webセーフカラーは、256色表示が一般的だった時代に、Windows・Macなどで共通して安定表示しやすい216色を選んだパレットです。現在はほぼ不要ですが、歴史的背景と6段階RGBの仕組みを解説します。
はじめて読む方へ｜まず知っておきたい基本
この記事で出てくる基本用語を先に確認します。ここだけ押さえておけば、専門知識がなくても本文を読み進められます。
RGBはRed・Green・Blueの3つの光を組み合わせて色を表す方式です。一般的な8bit表現では各成分を0〜255で示します。
Webセーフカラーとは、ディスプレイが256色表示だった時代に、主要なプラットフォーム間で共通して表示しやすい216色をまとめたパレットです。現在の一般的なディスプレイやブラウザでは、Webセーフカラーへ限定する必要はほぼありません。
Webセーフカラーは、各RGBチャンネルを6段階に限定した 6 × 6 × 6 = 216色 のパレットです。昔はOS間の色ずれやディザリングを減らすために意味がありましたが、24bitカラーが一般化した現在は歴史的な知識として扱うのが中心です。
記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。
#3F6682#DDB04F#70A477#C96567#7862A1なぜ216色なの？
赤・緑・青それぞれを6段階に絞り、その全組み合わせを使うためです。
| RGB各チャンネル | 16進数 | 10進数 |
|---|---|---|
| 0 | 00 | 0 |
| 1 | 33 | 51 |
| 2 | 66 | 102 |
| 3 | 99 | 153 |
| 4 | CC | 204 |
| 5 | FF | 255 |
たとえば #FFCC00 は、R=FF、G=CC、B=00で、すべてWebセーフの6段階値に含まれます。
昔はなぜ必要だった？
初期のPC環境では、画面で同時に使える色数が限られ、OSによってシステムパレットも異なりました。共通しやすい色だけを選ぶことで、意図しない色置換やディザリングを減らす目的がありました。
現在も使う必要はある？
通常のWeb制作では必要ありません。W3Cの解説でも、Webセーフカラーは256色表示の時代に由来し、現代のブラウザでは24bitカラーを扱えるため、ほとんど必要ないと説明されています。
Webセーフカラーは昔の表示互換性の話です。文字の読みやすさ、色覚多様性、WCAGコントラスト基準などの「アクセシブルな色」とは別概念です。
WebセーフカラーとCSSカラーは別物
CSSでは現在、HEX、rgb()、hsl()、lab()、oklch()など多様な色指定が使えます。Webセーフカラーだけに制限する必要はありません。
よくある質問
Webセーフカラーは216色すべて覚える必要がありますか？
ありません。現在のWeb制作では限定して使う必要がほぼないため、歴史と仕組みを理解しておけば十分です。
#FFFFFFや#000000もWebセーフですか？
はい。各チャンネルが00またはFFなのでWebセーフパレットに含まれます。
Webセーフカラーなら文字が読みやすいですか？
そうとは限りません。可読性は前景色と背景色のコントラストなどで評価します。
コメントを残す