Webセーフカラー 216色のカラーコード一覧と色サンプル

よこのじ(@yokonoji_work)です。

デザインスキルがないと、Webサイトの配色にはとても悩んでしまいませんか?

その原因のひとつに色の数が多すぎるということがあります。例えば同じ赤でも微妙にRGB値が異なるものなど…

そこで、Webセーフカラーという216色の色セットについて調べてみましたので、ご紹介します。色選びにあたっての迷いが少しでもなくなれば幸いです。

CSSでの色指定とWebセーフカラー

CSSで色指定するには下記のような方法があります。

  • red, green, blueなどのカラーネーム
  • rgba(0, 255, 255, 1) 10進表記 a要素は透明度(0:完全に透明~1:完全に不透明)
  • #00FFFF 16進表記 左から2桁ごとにRGB
  • hsla(0 , 100%, 50%, 1) 色相, 彩度, 明度, 透明

10進数、16進数ではRGBの各色の濃さを256段階で設定します。そのため、フルカラーで16,777,216色となります。

そして16進数表記においては、RGBの各数値がゾロ目の場合は6桁から3桁に短縮できます(例:#FFCC66 > #FC6)。

短縮形は16×16×16=4096色で、そのうち下記の216色はWebセーフカラーと呼ばれ、どのような環境でも間違いなく表示できる色とされています。

Webセーフカラー 216色のカラーコードと色サンプル

 

#FFF
255 255 255
#FFC
255 255 204
#FF9
255 255 153
#FF6
255 255 102
#FF3
255 255 051
#FF0
255 255 000
#FCF
255 204 255
#FCC
255 204 204
#FC9
255 204 153
#FC6
255 204 102
#FC3
255 204 051
#FC0
255 204 000
#F9F
255 153 255
#F9C
255 153 204
#F99
255 153 153
#F96
255 153 102
#F93
255 153 051
#F90
255 153 000
#F6F
255 102 255
#F6C
255 102 204
#F69
255 102 153
#F66
255 102 102
#F63
255 102 051
#F60
255 102 000
#F3F
255 051 255
#F3C
255 051 204
#F39
255 051 153
#F36
255 051 102
#F33
255 051 051
#F30
255 051 000
#F0F
255 000 255
#F0C
255 000 204
#F09
255 000 153
#F06
255 000 102
#F03
255 000 051
#F00
255 000 000
#CFF
204 255 255
#CFC
204 255 204
#CF9
204 255 153
#CF6
204 255 102
#CF3
204 255 051
#CF0
204 255 000
#CCF
204 204 255
#CCC
204 204 204
#CC9
204 204 153
#CC6
204 204 102
#CC3
204 204 051
#CC0
204 204 000
#C9F
204 153 255
#C9C
204 153 204
#C99
204 153 153
#C96
204 153 102
#C93
204 153 051
#C90
204 153 000
#C6F
204 102 255
#C6C
204 102 204
#C69
204 102 153
#C66
204 102 102
#C63
204 102 051
#C60
204 102 000
#C3F
204 051 255
#C3C
204 051 204
#C39
204 051 153
#C36
204 051 102
#C33
204 051 051
#C30
204 051 000
#C0F
204 000 255
#C0C
204 000 204
#C09
204 000 153
#C06
204 000 102
#C03
204 000 051
#C00
204 000 000
#9FF
153 255 255
#9FC
153 255 204
#9F9
153 255 153
#9F6
153 255 102
#9F3
153 255 051
#9F0
153 255 000
#9CF
153 204 255
#9CC
153 204 204
#9C9
153 204 153
#9C6
153 204 102
#9C3
153 204 051
#9C0
153 204 000
#99F
153 153 255
#99C
153 153 204
#999
153 153 153
#996
153 153 102
#993
153 153 051
#990
153 153 000
#96F
153 102 255
#96C
153 102 204
#969
153 102 153
#966
153 102 102
#963
153 102 051
#960
153 102 000
#93F
153 051 255
#93C
153 051 204
#939
153 051 153
#936
153 051 102
#933
153 051 051
#930
153 051 000
#90F
153 000 255
#90C
153 000 204
#909
153 000 153
#906
153 000 102
#903
153 000 051
#900
153 000 000
#6FF
102 255 255
#6FC
102 255 204
#6F9
102 255 153
#6F6
102 255 102
#6F3
102 255 051
#6F0
102 255 000
#6CF
102 204 255
#6CC
102 204 204
#6C9
102 204 153
#6C6
102 204 102
#6C3
102 204 051
#6C0
102 204 000
#69F
102 153 255
#69C
102 153 204
#699
102 153 153
#696
102 153 102
#693
102 153 051
#690
102 153 000
#66F
102 102 255
#66C
102 102 204
#669
102 102 153
#666
102 102 102
#663
102 102 051
#660
102 102 000
#63F
102 051 255
#63C
102 051 204
#639
102 051 153
#636
102 051 102
#633
102 051 051
#630
102 051 000
#60F
102 000 255
#60C
102 000 204
#609
102 000 153
#606
102 000 102
#603
102 000 051
#600
102 000 000
#3FF
051 255 255
#3FC
051 255 204
#3F9
051 255 153
#3F6
051 255 102
#3F3
051 255 051
#3F0
051 255 000
#3CF
051 204 255
#3CC
051 204 204
#3C9
051 204 153
#3C6
051 204 102
#3C3
051 204 051
#3C0
051 204 000
#39F
051 153 255
#39C
051 153 204
#399
051 153 153
#396
051 153 102
#393
051 153 051
#390
051 153 000
#36F
051 102 255
#36C
051 102 204
#369
051 102 153
#366
051 102 102
#363
051 102 051
#360
051 102 000
#33F
051 051 255
#33C
051 051 204
#339
051 051 153
#336
051 051 102
#333
051 051 051
#330
051 051 000
#30F
051 000 255
#30C
051 000 204
#309
051 000 153
#306
051 000 102
#303
051 000 051
#300
051 000 000
#0FF
000 255 255
#0FC
000 255 204
#0F9
000 255 153
#0F6
000 255 102
#0F3
000 255 051
#0F0
000 255 000
#0CF
000 204 255
#0CC
000 204 204
#0C9
000 204 153
#0C6
000 204 102
#0C3
000 204 051
#0C0
000 204 000
#09F
000 153 255
#09C
000 153 204
#099
000 153 153
#096
000 153 102
#093
000 153 051
#090
000 153 000
#06F
000 102 255
#06C
000 102 204
#069
000 102 153
#066
000 102 102
#063
000 102 051
#060
000 102 000
#03F
000 051 255
#03C
000 051 204
#039
000 051 153
#036
000 051 102
#033
000 051 051
#030
000 051 000
#00F
000 000 255
#00C
000 000 204
#009
000 000 153
#006
000 000 102
#003
000 000 051
#000
000 000 000

余談 -RubyでのHTMLコード自動生成-

今回、カラーコードの数値データからHTMLコードに書き起こす必要があったのですが、216色と多かったので手書きは諦めました。また、6列表示(スマホでは列数が違うかも)や文字色を行ごとに変えて読みやすくするなどの小細工もしたかったため、Rubyで自動生成しました。

詳細内容はこちら

#FFFFFF

255 255 255

このような色情報と文字情報を216個分入力して、色ごとに次のように変換しました。

<span class=’box’ style=’background-color: #FFF; border: 1px solid #FFF;’><span class=’text’ style=’color: #000′>#FFF<br>255 255 255</span></span>

  • カラーコード6桁を3桁に短縮
  • カラーコードと同じ色を背景色を設定
  • 1行あたり6列として216個を整列
  • 3行ごとに文字色を黒と白で使い分け

これを実現したRubyのコードはこのような感じです。

また、入力データは次のようになります。16進数と10進数、2行1セットです。