Webセーフカラーとは?216色に限定されていた歴史的背景を解説

基本の理解

まずはWebセーフカラーとは何だったのか、その背景を押さえましょう。

Webセーフカラーの基本とは何か

Webセーフカラーとは、かつて表示できる色数が少ないパソコンでも、WindowsとMacのどちらでも色が崩れずに表示されやすいとされていた、216色に限定されたカラーパレット(使ってよい色をあらかじめ決めて一覧にしたもの)のことです。

公式の規格というより、1990年代のWeb制作者の間で広く使われていた目安です。

現在は表示環境の性能が向上したため使う必要性はなくなっていますが、昔のWeb業界の背景を知ることで、なぜ色に関する制約や慣習があったのかを理解できます。

216色をすべて並べると、次のようになります。

Webセーフカラー216色の一覧(赤の強さごとに6×6のブロックに分けて並べたもの)

なぜこの制約が生まれたのか

1990年代には、一度に256色しか表示できないパソコンが多く使われていました。

こうした環境で、表示できる256色に含まれない色を使おうとすると、色が崩れてしまいます。

「色が崩れる」とは、具体的には次のような状態です。

• 近い色に置き換わる
  表示できる色の中から一番近い色に勝手に置き換えられ、指定した色と違う色味になります。
• 点々の模様で表示される(ディザリング)
  表示できる2色以上を細かい点々で交互に並べ、離れて見ると目的の色に見えるように無理やり混ぜて表示します。
  近くで見るとザラザラした模様になり、デザイナーの意図とは違う見た目になります。

256色の環境で、表示できない色を指定したときの見え方のイメージ(点々は分かりやすいよう拡大しています)

さらに、WindowsとMacでは、256色のうちパソコン自身(OS)が画面表示のために確保している色が違っていました。

そこで、どちらの環境のブラウザでも共通して表示できる色に絞り込んだのが、Webセーフカラーの216色です。

これがWebで使われるRGBカラー(赤・緑・青の光の3色を組み合わせて画面上の色を表現する仕組み)の歴史的な背景のひとつです。

現在のパソコンやスマホの画面は約1677万色(フルカラー)を表示できるため、どの色を指定しても、ディザリングで崩れることはなくなりました。

ただし、画面ごとに表現できる色の範囲や明るさの設定は違うため、どの画面でもまったく同じ色に見えるとは限りません(詳しくは色域(ガモット)とは?で解説しています)。

今の実務での位置づけ

Webセーフカラーは、今はどのように扱えばよいのかを見ていきましょう。

今は自由に色を指定してよい

実務では、Webセーフカラーに縛られず、HEXカラーコード(#FF6600のように、Webで色を指定するときに使う6桁の英数字の記号)で自由に色を指定するのが基本です。

216色だけでは、今のWebデザインでよく使われる、くすみカラーや微妙な濃淡のグレーなどを表現できないためです。

レトロなデザインの素材として使える

Webセーフカラーは、赤・緑・青の強さを20%刻みの大きな段階でしか選べないため、原色に近いパキッとした鮮やかな色が多いのが特徴です。

そのため、90年代の個人サイト風やレトロポップなデザインを作りたいときに、あえてWebセーフカラーから色を選ぶと、昔懐かしい雰囲気を出せます。

Webセーフカラーだけで作った90年代の個人サイト風の見本

「色数を絞る」考え方は今も有効

216色という制限そのものは必要なくなりましたが、使う色数を絞るという考え方は今も有効です。

ただし今は、決められた216色から選ぶのではなく、サイトで使う色を自分で数色だけ決めて、それ以外は使わないというやり方が主流です。

たとえば、ベースカラー・メインカラー・アクセントカラーと文字色の4〜5色程度だけを決めて、サイト全体で使い回します(色の決め方は色数を増やしすぎない考え方とは?や色の割合とは?で解説しています)。

Web制作では、決めた色をCSSのカスタムプロパティ(変数)にまとめておくと、色が増えすぎるのを防げます。

/* サイトで使う色をここで決めて、それ以外の色は使わない */
:root {
  --color-base: #ffffff;   /* ベースカラー */
  --color-main: #1e3a5f;   /* メインカラー */
  --color-accent: #c2410c; /* アクセントカラー */
  --color-text: #333333;   /* 文字色 */
}

.button {
  background: var(--color-accent);
  color: var(--color-base);
}

このように使う色をあらかじめ一覧にして決めておく方法は、デザインシステム(サイトやアプリのデザインのルールや部品をまとめたもの)の基本的な考え方でもあります。

実践のポイント

Webセーフカラーを知る上での注意点と、よくある疑問をまとめます。

注意点・よくある間違い

• 現在のWeb制作では必須の知識ではないため、「昔はこういう制約があった」という背景知識程度に留めておけば十分です。
  実務で厳密に216色に絞る必要はありません。
• 名称から「Webで安全に使うために必ず守るべき色」と誤解してしまうことがありますが、現在は必須のルールではありません。
  名前に引きずられて過度に意識しすぎないようにしましょう。
• Webセーフカラーの中から選べば配色がまとまる、というわけではありません。
  鮮やかな色が多いため、そのまま組み合わせると派手でまとまりにくくなることもあります。

よくある質問

• Q. 今のWeb制作でWebセーフカラーを気にする必要はある?
  A. 基本的に気にする必要はありません。
  現在のパソコンやスマホの画面はフルカラーで表示できるため、HEXカラーコードで自由に色を指定して問題ありません。
• Q. なぜ216色という中途半端な数だったの?
  A. 赤・緑・青それぞれの光の強さを、0%・20%・40%・60%・80%・100%の6段階で組み合わせると、6×6×6=216通りになるためです。
  HEXカラーコードでは、この6段階をそれぞれ00・33・66・99・CC・FFと書きます(たとえば#FF6600は、赤100%・緑40%・青0%のオレンジです)。
  256色のうち、WindowsとMacのOSが確保している色を除いた残りの中で、規則正しく組み合わせられる最大の数が、この216色でした(7段階にすると343色になり、256色を超えてしまいます)。

まとめ

Webセーフカラーとは、256色しか表示できない環境が多かった時代に、WindowsとMacのどちらでも色が崩れにくい色として使われていた216色のカラーパレットです。

現在は必須のルールではなく、HEXカラーコードで自由に色を指定して問題ありませんが、色数を絞ってシンプルにまとめるという考え方は今も参考にできます。

まずは自分のサイトで使っている色を書き出してみて、ベース・メイン・アクセント・文字色の数色に絞れないか見直してみてください。