2015/02-2023/10/04

CSS 色の指定 : (資料) Web セーフカラー 216色

概略

Web セーフカラーは、昔にディスプレイで 24bit フルカラーが表示できない時代に出てきた用語です。現在では色数の制約について気にする必要はありません。 Web セーフカラーの特徴を説明し、色のサンプルを紹介しています。

前置き

昔のディスプレイでは 24bit フルカラー (約1,600万色) を表示できない時代がありました。 20世紀のごく初期の PC ではモノクロ (白と黒の 2色) や 16色程度のカラーしか表示できませんでした。 Web が登場しはじめた 20世紀末でも当時の PC の処理能力がとても低かったこともあり、表示可能な色数が 256色程度の時代がありました。こういう時代に Web セーフカラーの話が出てきました。

Web セーフカラーの特徴

赤、緑、黄色の値を 00, 33, 66, 99, cc, ff で組み合わせた色です。
例: #ff33cc (#f3c), #990066 (#906) など。
各色 6 段階で合計 6 x 6 x 6 = 216 色あります。
彩度 100％の鮮やかな色が多く、彩度の低い色が少ないのが特徴です。

◎ 色の構成

  彩度    色数
  100％  152色   鮮やかな色
   66％   18色  
   50％   24色  
   33％   12色  
   20％    6色  
    0％    6色  モノクロ (白,灰色,黒)
  --------------------------------------
  合計   216色

彩度 100％の色 (152色)

下のサンプルは中心が輝度 100％で白、周囲が輝度 50％で白味も黒味もない一番鮮やかな色になります。

#f00

#f03

#f06

#f09

#f0C

#f0f

#f30

#f33

#f36

#f39

#f3c

#f3f

#c0f

#f60

#f63

#f66

#f69

#f6c

#f6f

#c3f

#90f

#f90

#f93

#f96

#f99

#f9c

#f9f

#c6f

#93f

#60f

#fc0

#fc3

#fc6

#fc9

#fcc

#fcf

#c9f

#96f

#63f

#30f

#ff0

#ff3

#ff6

#ff9

#ffc

#fff

#ccf

#99f

#66f

#33f

#00f

#cf0

#cf3

#cf6

#cf9

#cfc

#cff

#9cf

#69f

#36f

#03f

#9f0

#9f3

#9f6

#9f9

#9fc

#9ff

#6cf

#39f

#06f

#6f0

#6f3

#6f6

#6f9

#6fc

#6ff

#3cf

#09f

#3f0

#3f3

#3f6

#3f9

#3fc

#3ff

#0cf

#0f0

#0f3

#0f6

#0f9

#0fc

#0ff

下のサンプルは中心が輝度 0％ (黒)、周囲が輝度 50％です。

#f00

#f03

#f06

#f09

#f0C

#f0f

#f30

#c00

#c03

#c06

#c09

#c0c

#c0f

#f60

#c30

#900

#903

#906

#909

#90c

#90f

#f90

#c60

#930

#600

#603

#606

#609

#60c

#60f

#fc0

#c90

#960

#630

#300

#303

#306

#309

#30c

#30f

#ff0

#cc0

#990

#660

#330

#000

#003

#006

#009

#00c

#00f

#cf0

#9c0

#690

#360

#030

#033

#036

#039

#03c

#03f

#9f0

#6c0

#390

#060

#063

#066

#069

#06c

#06f

#6f0

#3c0

#090

#093

#096

#099

#09c

#09f

#3f0

#0c0

#0c3

#0c6

#0c9

#0cc

#0cf

#0f0

#0f3

#0f6

#0f9

#0fc

#0ff

彩度60％、輝度50％(18色)

#c33	#c63	#c93	#cc3	#9c3	#6c3
#3c3	#3c6	#3c9	#3cc	#39c	#36c
#33c	#63c	#93c	#c3c	#c39	#c36

彩度50％、輝度60％(12色)と40％(12色)

#c66	#c96	#cc6	#9c6	#6c6	#6c9
#933	#963	#993	#693	#393	#396
#6cc	#69c	#66c	#96c	#c6c	#c69
#399	#369	#339	#639	#939	#936

彩度33％、輝度70％(6色)と30％(6色)

#c99	#cc9	#9c9	#9cc	#99c	#c9c
#633	#663	#363	#366	#336	#636

彩度20％、輝度50％(6色)

#966

#996

#696

#699

#669

#969

彩度 0％ (モノクロ)