htmlで色を表現する場合、基本16色を使用すればほぼ全てのブラウザで表現できますし、256色の環境でも216色を使用していれば問題ないはずです。
ただし、ディスプレイの設定やパソコンの設定などによって、イメージが異なることがあります。
それ以外の色を指定した場合に該当する色が表現できない場合は、ブラウザが近い色を選択して表現します。
色のサンプルとして参考にしてみてください。
利用のサンプル
<span style="color:#ff0000;">red</span> ⇒ red
<span style="color:red;">red</span> ⇒ red
Basic 16 Colors
「色名」で指定して表示が可能な16種類の色です。
グラフィックカードのドライバがインストールされていなかったり、少数派だとは思いますが16色を設定している場合でも表現が可能な色です。
| #000000 : black |
#808080 : gray |
#c0c0c0 : silver |
#ffffff : white |
|
|
|
|
| #ff0000 : red |
#ffff00 : yellow |
#00ff00 : lime |
#00ffff : aqua |
|
|
|
|
| #0000ff : blue |
#ff00ff : fuchsia |
#800000 : maroon |
#808000 : olive |
|
|
|
|
| #008000 : green |
#008080 : teal |
#000080 : navy |
#800080 : purple |
|
|
|
|
Web Safe Color
ほぼ全ての環境で安全に表現できるため、セーフカラー（安全な色）と呼ばれます。
（8bitカラーの環境で表示できる色数＝256色、24bitカラーの環境で表示できる色数＝16,777,216色）
カラーコードは、画面で表示する色の三原色である、RGB（Red Green Blue）をそれぞれ2桁の16進数で表現しています。
赤緑青の各色がそれぞれ 00 ～ ff の 256段階の濃淡が組み合わさることで、256 × 256 × 256 ＝ 16,777,216 色が表現できることになります。
このうち、各色を6段階に分割、"00", "33", "66", "99", "cc", "ff" の6種類のコードのみの組み合わせが、このウェブセーフカラーです。
RGBのそれぞれが6色ずつ、 6 × 6 × 6 ＝ 216色とすることで、8bitカラーの環境でも表現できることになります。
6桁の数値は2桁ずつRGBを表現しています。
RGB各色の値が 00 （最小値）に近いほどその色の度合いが弱くなり、ff （最大値）に近いほどその色の度合いが強くなります。
ex.) 赤だけを最大にすると .. #ff0000 → ■■、
青だけを最大にすると .. #0000ff → ■■
| #000000 |
| #330000 |
| #660000 |
| #990000 |
| #cc0000 |
| #ff0000 |
| #000033 |
| #330033 |
| #660033 |
| #990033 |
| #cc0033 |
| #ff0033 |
| #000066 |
| #330066 |
| #660066 |
| #990066 |
| #cc0066 |
| #ff0066 |
| #000099 |
| #330099 |
| #660099 |
| #990099 |
| #cc0099 |
| #ff0099 |
| #0000cc |
| #3300cc |
| #6600cc |
| #9900cc |
| #cc00cc |
| #ff00cc |
| #0000ff |
| #3300ff |
| #6600ff |
| #9900ff |
| #cc00ff |
| #ff00ff |
| #003300 |
| #333300 |
| #663300 |
| #993300 |
| #cc3300 |
| #ff3300 |
| #003333 |
| #333333 |
| #663333 |
| #993333 |
| #cc3333 |
| #ff3333 |
| #003366 |
| #333366 |
| #663366 |
| #993366 |
| #cc3366 |
| #ff3366 |
| #003399 |
| #333399 |
| #663399 |
| #993399 |
| #cc3399 |
| #ff3399 |
| #0033cc |
| #3333cc |
| #6633cc |
| #9933cc |
| #cc33cc |
| #ff33cc |
| #0033ff |
| #3333ff |
| #6633ff |
| #9933ff |
| #cc33ff |
| #ff33ff |
| #006600 |
| #336600 |
| #666600 |
| #996600 |
| #cc6600 |
| #ff6600 |
| #006633 |
| #336633 |
| #666633 |
| #996633 |
| #cc6633 |
| #ff6633 |
| #006666 |
| #336666 |
| #666666 |
| #996666 |
| #cc6666 |
| #ff6666 |
| #006699 |
| #336699 |
| #666699 |
| #996699 |
| #cc6699 |
| #ff6699 |
| #0066cc |
| #3366cc |
| #6666cc |
| #9966cc |
| #cc66cc |
| #ff66cc |
| #0066ff |
| #3366ff |
| #6666ff |
| #9966ff |
| #cc66ff |
| #ff66ff |
| #009900 |
| #339900 |
| #669900 |
| #999900 |
| #cc9900 |
| #ff9900 |
| #009933 |
| #339933 |
| #669933 |
| #999933 |
| #cc9933 |
| #ff9933 |
| #009966 |
| #339966 |
| #669966 |
| #999966 |
| #cc9966 |
| #ff9966 |
| #009999 |
| #339999 |
| #669999 |
| #999999 |
| #cc9999 |
| #ff9999 |
| #0099cc |
| #3399cc |
| #6699cc |
| #9999cc |
| #cc99cc |
| #ff99cc |
| #0099ff |
| #3399ff |
| #6699ff |
| #9999ff |
| #cc99ff |
| #ff99ff |
| #00cc00 |
| #33cc00 |
| #66cc00 |
| #99cc00 |
| #cccc00 |
| #ffcc00 |
| #00cc33 |
| #33cc33 |
| #66cc33 |
| #99cc33 |
| #cccc33 |
| #ffcc33 |
| #00cc66 |
| #33cc66 |
| #66cc66 |
| #99cc66 |
| #cccc66 |
| #ffcc66 |
| #00cc99 |
| #33cc99 |
| #66cc99 |
| #99cc99 |
| #cccc99 |
| #ffcc99 |
| #00cccc |
| #33cccc |
| #66cccc |
| #99cccc |
| #cccccc |
| #ffcccc |
| #00ccff |
| #33ccff |
| #66ccff |
| #99ccff |
| #ccccff |
| #ffccff |
| #00ff00 |
| #33ff00 |
| #66ff00 |
| #99ff00 |
| #ccff00 |
| #ffff00 |
| #00ff33 |
| #33ff33 |
| #66ff33 |
| #99ff33 |
| #ccff33 |
| #ffff33 |
| #00ff66 |
| #33ff66 |
| #66ff66 |
| #99ff66 |
| #ccff66 |
| #ffff66 |
| #00ff99 |
| #33ff99 |
| #66ff99 |
| #99ff99 |
| #ccff99 |
| #ffff99 |
| #00ffcc |
| #33ffcc |
| #66ffcc |
| #99ffcc |
| #ccffcc |
| #ffffcc |
| #00ffff |
| #33ffff |
| #66ffff |
| #99ffff |
| #ccffff |
| #ffffff |
Color Name
16進数でのカラーコードの代わりに、直観的に分かるようにカラーネームが用意されています。
現在ではほとんどのブラウザでサポートされているようですが、認識できない色名の場合は異なる結果となります。
カラーネームと対応するカラーコードを一覧にしています。
ブロック内は上から下へ、各ブロックは左から右へ、カラーコードの昇順に並べてあります。
なお、 aqua と cyan 、 fuchsia と magenta は同じコードです。
なので色名を変えても実際の色は同じです。
| #000000 | black |
| #000080 | navy |
| #00008b | darkblue |
| #0000cd | mediumblue |
| #0000ff | blue |
| #006400 | darkgreen |
| #008000 | green |
| #008080 | teal |
| #008b8b | darkcyan |
| #00bfff | deepskyblue |
| #00ced1 | darkturquoise |
| #00fa9a | mediumspringgreen |
| #00ff00 | lime |
| #00ff7f | springgreen |
| #00ffff | aqua |
| #00ffff | cyan |
| #191970 | midnightblue |
| #1e90ff | dodgerblue |
| #20b2aa | lightseagreen |
| #228b22 | forestgreen |
| #2e8b57 | seagreen |
| #2f4f4f | darkslategray |
| #32cd32 | limegreen |
| #3cb371 | mediumseagreen |
| #40e0d0 | turquoise |
| #4169e1 | royalblue |
| #4682b4 | steelblue |
| #483d8b | darkslateblue |
| #48d1cc | mediumturquoise |
| #4b0082 | indigo |
.
| #556b2f | darkolivegreen |
| #5f9ea0 | cadetblue |
| #6495ed | cornflowerblue |
| #66cdaa | mediumaquamarine |
| #696969 | dimgray |
| #6a5acd | slateblue |
| #6b8e23 | olivedrab |
| #708090 | slategray |
| #778899 | lightslategray |
| #7b68ee | mediumslateblue |
| #7cfc00 | lawngreen |
| #7fff00 | chartreuse |
| #7fffd4 | aquamarine |
| #800000 | maroon |
| #800080 | purple |
| #808000 | olive |
| #808080 | gray |
| #87ceeb | skyblue |
| #87cefa | lightskyblue |
| #8a2be2 | blueviolet |
| #8b0000 | darkred |
| #8b008b | darkmagenta |
| #8b4513 | saddlebrown |
| #8fbc8f | darkseagreen |
| #90ee90 | lightgreen |
| #9370db | mediumpurple |
| #9400d3 | darkviolet |
| #98fb98 | palegreen |
| #9932cc | darkorchid |
| #9acd32 | yellowgreen |
.
| #a0522d | sienna |
| #a52a2a | brown |
| #a9a9a9 | darkgray |
| #add8e6 | lightblue |
| #adff2f | greenyellow |
| #afeeee | paleturquoise |
| #b0c4de | lightsteelblue |
| #b0e0e6 | powderblue |
| #b22222 | firebrick |
| #b8860b | darkgoldenrod |
| #ba55d3 | mediumorchid |
| #bc8f8f | rosybrown |
| #bdb76b | darkkhaki |
| #c0c0c0 | silver |
| #c71585 | mediumvioletred |
| #cd5c5c | indianred |
| #cd853f | peru |
| #d2691e | chocolate |
| #d2b48c | tan |
| #d3d3d3 | lightgrey |
| #d8bfd8 | thistle |
| #da70d6 | orchid |
| #daa520 | goldenrod |
| #db7093 | palevioletred |
| #dc143c | crimson |
| #dcdcdc | gainsboro |
| #dda0dd | plum |
| #deb887 | burlywood |
| #e0ffff | lightcyan |
| #e6e6fa | lavender |
.
| #e9967a | darksalmon |
| #ee82ee | violet |
| #eee8aa | palegoldenrod |
| #f08080 | lightcoral |
| #f0e68c | khaki |
| #f0f8ff | aliceblue |
| #f0fff0 | honeydew |
| #f0ffff | azure |
| #f4a460 | sandybrown |
| #f5deb3 | wheat |
| #f5f5dc | beige |
| #f5f5f5 | whitesmoke |
| #f5fffa | mintcream |
| #f8f8ff | ghostwhite |
| #fa8072 | salmon |
| #faebd7 | antiquewhite |
| #faf0e6 | linen |
| #fafad2 | lightgoldenrodyellow |
| #fdf5e6 | oldlace |
| #ff0000 | red |
| #ff00ff | fuchsia |
| #ff00ff | magenta |
| #ff1493 | deeppink |
| #ff4500 | orangered |
| #ff6347 | tomato |
| #ff69b4 | hotpink |
| #ff7f50 | coral |
| #ff8c00 | darkorange |
| #ffa07a | lightsalmon |
| #ffa500 | orange |
.
| #ffb6c1 | lightpink |
| #ffc0cb | pink |
| #ffd700 | gold |
| #ffdab9 | peachpuff |
| #ffdead | navajowhite |
| #ffe4b5 | moccasin |
| #ffe4c4 | bisque |
| #ffe4e1 | mistyrose |
| #ffebcd | blanchedalmond |
| #ffefd5 | papayawhip |
| #fff0f5 | lavenderblush |
| #fff5ee | seashell |
| #fff8dc | cornsilk |
| #fffacd | lemonchiffon |
| #fffaf0 | floralwhite |
| #fffafa | snow |
| #ffff00 | yellow |
| #ffffe0 | lightyellow |
| #fffff0 | ivory |
| #ffffff | white |
.
Gray Scale
R、G、B の値をそれぞれ同じ値をぶつけることでグレースケールが表現できます。
それぞれが16進数の 00 ～ ff の256通りが表現できるので、最大値から 8(10) ずつ減算して組み合わせてみます。
| #ffffff |
#f7f7f7 |
#efefef |
#e7e7e7 |
#dfdfdf |
#d7d7d7 |
#cfcfcf |
#c7c7c7 |
| #bfbfbf |
#b7b7b7 |
#afafaf |
#a7a7a7 |
#9f9f9f |
#979797 |
#8f8f8f |
#878787 |
| #7f7f7f |
#777777 |
#6f6f6f |
#676767 |
#5f5f5f |
#575757 |
#4f4f4f |
#474747 |
| #3f3f3f |
#373737 |
#2f2f2f |
#272727 |
#1f1f1f |
#171717 |
#0f0f0f |
#070707 |
Gradation Scale
R、G、B の値の組み合わせで、さまざまな色のグラデーションが表現できます。
いずれか、または、2つの値を最大値 ( ff ) で固定しておいて、残りの色を最大値から 16(10) ずつ減算して組み合わせてみます。
24bitカラーの環境であれば、値を変化させることで色を細かく変化させることが可能です。
| #xxxxxx |
#ffxxxx |
#ffffxx |
#xxffxx |
#xxffff |
#xxxxff |
#ffxxff |
|
| #f0f0f0 |
#fff0f0 |
#fffff0 |
#f0fff0 |
#f0ffff |
#f0f0ff |
#fff0ff |
15(10) |
| #e0e0e0 |
#ffe0e0 |
#ffffe0 |
#e0ffe0 |
#e0ffff |
#e0e0ff |
#ffe0ff |
31(10) |
| #d0d0d0 |
#ffd0d0 |
#ffffd0 |
#d0ffd0 |
#d0ffff |
#d0d0ff |
#ffd0ff |
47(10) |
| #c0c0c0 |
#ffc0c0 |
#ffffc0 |
#c0ffc0 |
#c0ffff |
#c0c0ff |
#ffc0ff |
63(10) |
| #b0b0b0 |
#ffb0b0 |
#ffffb0 |
#b0ffb0 |
#b0ffff |
#b0b0ff |
#ffb0ff |
79(10) |
| #a0a0a0 |
#ffa0a0 |
#ffffa0 |
#a0ffa0 |
#a0ffff |
#a0a0ff |
#ffa0ff |
95(10) |
| #909090 |
#ff9090 |
#ffff90 |
#90ff90 |
#90ffff |
#9090ff |
#ff90ff |
111(10) |
| #808080 |
#ff8080 |
#ffff80 |
#80ff80 |
#80ffff |
#8080ff |
#ff80ff |
127(10) |
| #707070 |
#ff7070 |
#ffff70 |
#70ff70 |
#70ffff |
#7070ff |
#ff70ff |
143(10) |
| #606060 |
#ff6060 |
#ffff60 |
#60ff60 |
#60ffff |
#6060ff |
#ff60ff |
159(10) |
| #505050 |
#ff5050 |
#ffff50 |
#50ff50 |
#50ffff |
#5050ff |
#ff50ff |
175(10) |
| #404040 |
#ff4040 |
#ffff40 |
#40ff40 |
#40ffff |
#4040ff |
#ff40ff |
191(10) |
| #303030 |
#ff3030 |
#ffff30 |
#30ff30 |
#30ffff |
#3030ff |
#ff30ff |
207(10) |
| #202020 |
#ff2020 |
#ffff20 |
#20ff20 |
#20ffff |
#2020ff |
#ff20ff |
223(10) |
| #101010 |
#ff1010 |
#ffff10 |
#10ff10 |
#10ffff |
#1010ff |
#ff10ff |
239(10) |
| #000000 |
#ff0000 |
#ffff00 |
#00ff00 |
#00ffff |
#0000ff |
#ff00ff |
255(10) |
セーフカラーでグラデーションをすると下の表のようになります。
ff、cc、99、66、33、00 の６種の組み合わせです
| #xxxxxx |
#ffxxxx |
#ffffxx |
#xxffxx |
#xxffff |
#xxxxff |
#ffxxff |
|
| #cccccc |
#ffcccc |
#ffffcc |
#ccffcc |
#ccffff |
#ccccff |
#ffccff |
cc |
| #999999 |
#ff9999 |
#ffff99 |
#99ff99 |
#99ffff |
#9999ff |
#ff99ff |
99 |
| #666666 |
#ff6666 |
#ffff66 |
#66ff66 |
#66ffff |
#6666ff |
#ff66ff |
66 |
| #333333 |
#ff3333 |
#ffff33 |
#33ff33 |
#33ffff |
#3333ff |
#ff33ff |
33 |
| #000000 |
#ff0000 |
#ffff00 |
#00ff00 |
#00ffff |
#0000ff |
#ff00ff |
00 |
