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% (モノクロ)
#000 | #333 | #666 | #999 | #ccc | #fff |