CSSでのカラー指定は#ffffffなど、通常６桁のカラーコードで行います。ですが、たまに#fffなど３桁で記載しているものを見たことはありませんか？
今回はCSSにおける短縮の仕組みと、短縮版のカラーコード一覧表をご紹介します。
CSSのカラーコード短縮の仕組み
カラーコードの６桁は赤、緑、青で２桁ずつ割り振られています。その関係から短縮する場合、各色の２桁を１桁にするイメージになります。
例えば#ffcc00の場合、短縮したコードは#fc0になります。逆に#ffcと略してしまった場合は#ffffccとなってしまいますので注意してください。
色によっては６桁全部違う文字を指定する場合がありますが、言わずもがなその場合は６文字全て使って色を表現しているので、短縮はできません。その関係から、短縮コードに関しては16進数（0~f）の３乗分の色数、つまり4,096色しか表現できないということになります。
Webセーフカラー216
Webセーフカラーというのは、どのブラウザでも同じように見えるとされている色のセットのことです。こちらの216色は全て短縮でも表現できる色で、迷ったらこちらから色を選ぶとWebデザインにおいては安全といえます。
下記に一覧にしておきますので、活用してみてください。
#000
#ffc
#9f9
#6ff
#33f
#f0f
#333
#ff9
#6f6
#3ff
#00f
#f0c
#666
#ff6
#3f3
#0ff
#30f
#c09
#999
#ff3
#0f0
#0cf
#30c
#f3c
#ccc
#ff0
#0f3
#09c
#63f
#906
#fff
#cf0
#0c3
#3cf
#309
#c39
#f30
#9c0
#3f6
#069
#63c
#f6c
#c30
#cf3
#093
#39c
#96f
#f09
#f63
#690
#3c6
#6cf
#60f
#603
#930
#9c3
#6f9
#09f
#306
#936
#c63
#cf6
#0f6
#036
#639
#c69
#f96
#9f0
#063
#369
#96c
#c06
#f60
#360
#396
#69c
#60c
#f9c
#630
#693
#6c9
#06c
#c9f
#f39
#963
#9c6
#0c6
#9cf
#93f
#f06
#c96
#6c0
#9fc
#39f
#90f
#903
#c60
#cf9
#3f9
#06f
#609
#c36
#fc9
#9f3
#0f9
#039
#93c
#f69
#f93
#6f0
#096
#36c
#c6f
#c03
#f90
#390
#3c9
#69f
#90c
#f36
#960
#6c3
#6fc
#03c
#c3f
#f03
#c93
#9f6
#0c9
#36f
#c0f
#300
#fc6
#3c0
#3fc
#03f
#303
#633
#c90
#6f3
#0fc
#003
#636
#600
#fc3
#3f0
#033
#336
#606
#966
#fc0
#030
#366
#006
#969
#933
#330
#363
#066
#669
#939
#900
#666
#060
#699
#339
#909
#c99
#660
#696
#399
#009
#c9c
#c66
#996
#393
#099
#99c
#c6c
#c33
#993
#090
#9cc
#66c
#c3c
#cc0
#990
#9c9
#6cc
#33c
#c0c
#fcc
#cc9
#6c6
#3cc
#00c
#fcf
#f99
#cc6
#3c3
#0cc
#ccf
#f9f
#f66
#cc3
#0c0
#cff
#99f
#f6f
#f33
#cc0
#cfc
#9ff
#66f
#f3f
#f00
