WEBセーフカラー

8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWEBセーフカラーといいます。 可能ならばページの背景色や文字色には、WEBセーフカラーを使用してください。 WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で作者の意図通りの色で表示させることができるからです。

WEBセーフカラー

WEBセーフカラー

8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWEBセーフカラーといいます。

WEBセーフカラーは、RGBの各色をそれぞれ6段階に分けて、それらの組み合わせでできる色です。 16進表記の場合は00、33、66、99、CC、FFの6段階、 0〜255の10進表記の場合は0、51、102、153、204、255の6段階、 パーセンテージ指定の場合は0%、20%、40%、60%、80%、100%の6段階の組み合わせでできる色は、全てWEBセーフカラーとなります。 6×6×6=216色です。

  #000000
0 0 0
  #333333
51 51 51
  #666666
102 102 102
  #999999
153 153 153
  #CCCCCC
204 204 204
  #FFFFFF
255 255 255
  #FFFFCC
255 255 204
  #FFFF99
255 255 153
  #FFFF66
255 25 102
  #FFFF33
255 255 51
  #FFFF00
255 255 0
  #CCCC00
204 204 0
  #FFCC66
255 20 102
  #FFCC00
255 204 0
  #FFCC33
255 204 51
  #CC9900
204 153 0
  #CC9933
204 153 51
  #996600
153 102 0
  #FF9900
255 153 0
  #FF9933
255 153 53
  #CC9966
204 153 102
  #CC6600
204 102 0
  #996633
153 102 51
  #663300
102 51 0
  #FFCC99
255 204 153
  #FF9966
255 153 102
  #FF6600
255 102 0
  #CC6633
204 102 51
  #993300
153 51 0
  #990000
153 0 0
  #FF6633
255 102 51
  #CC3300
204 51 0
  #FF3300
255 51 0
  #FF0000
255 0 0
  #CC0000
204 0 0
  #660000
102 0 0
  #FFCCCC
255 204 204
  #CC9999
204 153 153
  #FF9999
255 153 153
  #CC6666
204 102 102
  #FF6666
255 102 102
  #FF3333
255 51 51
  #FF0033
255 0 51
  #CC0033
204 0 51
  #CC3333
204 51 51
  #993333
153 51 51
  #990033
153 0 51
  #330000
51 0 0
  #FF6699
255 102 153
  #FF3366
255 51 102
  #FF0066
255 0 102
  #CC3366
204 51 102
  #996666
153 102 102
  #663333
102 51 51
  #FF99CC
255 153 204
  #FF3399
255 51 153
  #FF0099
255 0 153
  #CC0066
204 0 102
  #993366
153 51 102
  #660033
102 0 51
  #FF66CC
255 102 204
  #FF00CC
255 0 204
  #FF33CC
255 51 204
  #CC6699
204 102 153
  #CC0099
204 0 153
  #990066
153 0 102
  #FFCCFF
255 204 255
  #FF99FF
255 153 255
  #FF66FF
255 102 255
  #FF33FF
255 51 255
  #FF00FF
255 0 255
  #CC3399
204 51 153
  #CC99CC
204 153 204
  #CC66CC
204 102 204
  #CC00CC
204 0 204
  #CC33CC
204 51 204
  #990099
153 0 153
  #993399
153 51 153
  #CC66FF
204 102 255
  #CC33FF
204 51 255
  #CC00FF
204 0 255
  #9900CC
153 0 204
  #9900CC
153 102 153
  #660066
102 0 102
  #CC99FF
204 153 255
  #9933FF
153 51 255
  #9900FF
153 0 255
  #9933CC
153 51 204
  #660099
102 0 153
  #663366
102 51 102
  #9966CC
153 102 204
  #9966FF
153 102 255
  #6600CC
102 0 204
  #6633CC
102 51 204
  #663399
102 51 153
  #330033
51 0 51
  #CCCCFF
204 204 255
  #9999FF
153 153 255
  #6633FF
102 51 255
  #6600FF
102 0 255
  #330099
51 0 153
  #330066
51 0 102
  #9966CC
153 102 204
  #9966FF
153 102 255
  #6600CC
102 0 204
  #3333FF
51 51 255
  #3300FF
51 0 255
  #3300CC
51 0 204
  #3333CC
51 51 204
  #000099
0 0 204
  #000066
0 0 102
  #6699FF
102 153 255
  #3366FF
102 102 255
  #0000FF
0 0 255
  #0000CC
0 0 204
  #0033CC
0 51 204
  #000033
0 0 51
  #0066FF
0 102 255
  #0066CC
0 102 204
  #3366CC
51 102 204
  #0033FF
0 51 255
  #003399
0 51 153
  #003366
0 51 102
  #99CCFF
153 153 204
  #6699CC
102 153 204
  #3399FF
51 153 255
  #0099FF
0 153 255
  #336699
51 102 153
  #006699
0 102 153
  #66CCFF
102 204 255
  #33CCFF
51 204 255
  #00CCFF
0 204 255
  #3399CC
51 153 204
  #0099CC
0 153 204
  #99CCCC
153 204 204
  #CCFFFF
204 255 255
  #66CCCC
102 204 204
  #669999
102 153 153
  #339999
51 153 153
  #006666
0 102 102
  #336666
51 102 102
  #99FFFF
153 255 255
  #66FFFF
102 255 255
  #33FFFF
51 255 255
  #00FFFF
0 255 255
  #00CCCC
0 204 204
  #99FFCC
153 255 204
  #66FFCC
102 255 204
  #33FFCC
51 255 204
  #00FFCC
0 255 204
  #33CCCC
51 204 204
  #009999
0 153 153
  #66CC99
102 204 153
  #33CC99
51 204 153
  #00CC99
0 204 153
  #009966
0 153 102
  #339966
51 153 102
  #006633
0 102 51
  #003333
0 51 51
  #66FF99
102 255 153
  #33FF99
51 255 153
  #00FF99
0 255 153
  #33CC66
51 204 102
  #00CC66
0 204 102
  #009933
0 153 51
  #99FF99
153 255 153
  #66FF66
102 255 102
  #33FF66
51 255 102
  #00FF66
0 255 102
  #339933
51 153 51
  #006600
0 102 0
  #CCFFCC
204 255 204
  #99CC99
153 204 153
  #669966
102 153 102
  #66CC66
102 204 102
  #336633
51 102 51
  #003300
0 51 0
  #33FF33
51 255 51
  #00FF33
0 255 51
  #00FF00
0 255 0
  #00CC00
0 204 0
  #33CC33
51 204 51
  #00CC00
0 204 0
  #66FF00
102 255 0
  #66FF33
102 255 51
  #33FF00
51 255 0
  #33CC00
51 204 0
  #339900
51 153 0
  #009900
0 153 0
  #CCFF99
204 255 153
  #99FF66
153 255 102
  #66CC00
102 204 0
  #66CC33
102 204 51
  #669933
102 153 51
  #336600
51 102 0
  #99FF00
153 255 0
  #99FF33
153 255 51
  #99CC66
153 204 102
  #99CC00
153 204 0
  #99CC33
153 204 51
  #669900
102 153 0
  #CCFF66
204 255 102
  #CCFF00
204 255 0
  #CCFF33
204 255 51
  #CCCC99
204 204 153
  #666633
102 102 51
  #333300
51 51 0
  #CCCC66
204 204 102
  #CCCC33
204 204 51
  #999966
153 153 102
  #999933
153 153 51
  #999900
153 153 0
  #666600
102 102 0

カラーネーム

HTMLでは16進表記の他にカラーネームで色を指定することができます。 以下のリファレンスの左側はカラーネームで指定したもの、右側は16進表記で指定したものです。

カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。 左右の色を見比べて、二つが同じ色で表示されていれば、今ご覧になっている環境では正しく表示されると考えて良いでしょう。

    aliceblue
#F0F8FF
    lightsalmon
#FFA07A
    antiquewhite
#FAEBD7
    lightseagreen
#20B2AA
    aqua
#00FFFF
    lightskyblue
#87CEFA
    aquamarine
#7FFFD4
    lightslategray
#778899
    azure
#F0FFFF
    lightsteelblue
#B0C4DE
    beige
#F5F5DC
    lightyellow
#FFFFE0
    bisque
#FFE4C4
    lime
#00FF00
    black
#000000
    limegreen
#32CD32
    blanchedalmond
#FFEBCD
    linen
#FAF0E6
    blue
#0000FF
    magenta
#FF00FF
    blueviolet
#8A2BE2
    maroon
#800000
    brown
#A52A2A
    mediumaquamarine
#66CDAA
    burlywood
#DEB887
    mediumblue
#0000CD
    cadetblue
#5F9EA0
    mediumorchid
#BA55D3
    chartreuse
#7FFF00
    mediumpurple
#9370DB
    chocolate
#D2691E
    mediumseagreen
#3CB371
    coral
#FF7F50
    mediumslateblue
#7B68EE
    cornflowerblue
#6495ED
    mediumspringgreen
#00FA9A
    cornsilk
#FFF8DC
    mediumturquoise
#48D1CC
    crimson
#DC143C
    mediumvioletred
#C71585
    cyan
#00FFFF
    midnightblue
#191970
    darkblue
#00008B
    mintcream
#F5FFFA
    darkcyan
#008B8B
    mistyrose
#FFE4E1
    darkgoldenrod
#B8860B
    moccasin
#FFE4B5
    darkgray
#A9A9A9
    navajowhite
#FFDEAD
    darkgreen
#006400
    navy
#000080
    darkkhaki
#BDB76B
    oldlace
#FDF5E6
    darkmagenta
#8B008B
    olive
#808000
    darkolivegreen
#556B2F
    olivedrab
#6B8E23
    darkorange
#FF8C00
    orange
#FFA500
    darkorchid
#9932CC
    orangered
#FF4500
    darkred
#8B0000
    orchid
#DA70D6
    darksalmon
#E9967A
    palegoldenrod
#EEE8AA
    darkseagreen
#8FBC8F
    palegreen
#98FB98
    darkslateblue
#483D8B
    paleturquoise
#AFEEEE
    darkslategray
#2F4F4F
    palevioletred
#DB7093
    darkturquoise
#00CED1
    papayawhip
#FFEFD5
    darkviolet
#9400D3
    peachpuff
#FFDAB9
    deeppink
#FF1493
    peru
#CD853F
    deepskyblue
#00BFFF
    pink
#FFC0CB
    dimgray
#696969
    plum
#DDA0DD
    dodgerblue
#1E90FF
    powderblue
#B0E0E6
    firebrick
#B22222
    purple
#800080
    floralwhite
#FFFAF0
    red
#FF0000
    forestgreen
#228B22
    rosybrown
#BC8F8F
    fuchsia
#FF00FF
    royalblue
#4169E1
    gainsboro
#DCDCDC
    saddlebrown
#8B4513
    ghostwhite
#F8F8FF
    salmon
#FA8072
    gold
#FFD700
    sandybrown
#F4A460
    goldenrod
#DAA520
    seagreen
#2E8B57
    gray
#808080
    seashell
#FFF5EE
    green
#008000
    sienna
#A0522D
    greenyellow
#ADFF2F
    silver
#C0C0C0
    honeydew
#F0FFF0
    skyblue
#87CEEB
    hotpink
#FF69B4
    slateblue
#6A5ACD
    indianred
#CD5C5C
    slategray
#708090
    indigo
#4B0082
    snow
#FFFAFA
    ivory
#FFFFF0
    springgreen
#00FF7F
    khaki
#F0E68C
    steelblue
#4682B4
    lavender
#E6E6FA
    tan
#D2B48C
    lavenderblush
#FFF0F5
    teal
#008080
    lawngreen
#7CFC00
    thistle
#D8BFD8
    lemonchiffon
#FFFACD
    tomato
#FF6347
    lightblue
#ADD8E6
    turquoise
#40E0D0
    lightcoral
#F08080
    violet
#EE82EE
    lightcyan
#E0FFFF
    wheat
#F5DEB3
    lightgoldenrodyellow
#FAFAD2
    white
#FFFFFF
    lightgreen
#90EE90
    whitesmoke
#F5F5F5
    lightgrey
#D3D3D3
    yellow
#FFFF00
    lightpink
#FFB6C1
    yellowgreen
#9ACD32

HTML4.01とXHTML1.0、CSS2で共通して正式に使用できる色名は次の16色(上の表で*印を付けた色)です。

  aqua
#00FFFF
  navy
#000080
  black
#000000
  olive
#808000
  blue
#0000FF
  purple
#800080
  fuchsia
#FF00FF
  red
#FF0000
  gray
#808080
  silver
#C0C0C0
  green
#008000
  teal
#008080
  lime
#00FF00
  white
#FFFFFF
  maroon
#800000
  yellow
#FFFF00