CSSで使える短縮カラーコードとWebセーフカラー216一覧表

CSSでのカラー指定は#ffffffなど、通常6桁のカラーコードで行います。ですが、たまに#fffなど3桁で記載しているものを見たことはありませんか?

今回はCSSにおける短縮の仕組みと、短縮版のカラーコード一覧表をご紹介します。

CSSのカラーコード短縮の仕組み

カラーコードの6桁は赤、緑、青で2桁ずつ割り振られています。その関係から短縮する場合、各色の2桁を1桁にするイメージになります。

例えば#ffcc00の場合、短縮したコードは#fc0になります。逆に#ffcと略してしまった場合は#ffffccとなってしまいますので注意してください。

色によっては6桁全部違う文字を指定する場合がありますが、言わずもがなその場合は6文字全て使って色を表現しているので、短縮はできません。その関係から、短縮コードに関しては16進数(0~f)の3乗分の色数、つまり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

Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて