カラーコードとカラー名の関係
スタイルシート（CSS）では、「#aabbcc」のように１６進数で色を指定するコード指定と、「red」のように色の名前で指定するカラー名指定があります。ここでは、色のコード名とカラー名の相対関係をまとめました。
色やカラー名で、順序の並べ替えができるようにしてあります。ご活用ください。
| 色 | R（赤） ▼ | G（緑） | B（青） | カラーコード | カラー名 |
|---|---|---|---|---|---|
| ● | 00 | 00 | 00 | #000000 | black |
| ● | 00 | 00 | 80 | #000080 | navy |
| ● | 00 | 00 | 8b | #00008b | darkblue |
| ● | 00 | 00 | cd | #0000cd | mediumblue |
| ● | 00 | 00 | ff | #0000ff | blue |
| ● | 00 | 64 | 00 | #006400 | darkgreen |
| ● | 00 | 80 | 00 | #008000 | green |
| ● | 00 | 80 | 80 | #008080 | teal |
| ● | 00 | 8b | 8b | #008b8b | darkcyan |
| ● | 00 | bf | ff | #00bfff | deepskyblue |
| ● | 00 | ce | d1 | #00ced1 | darkturquoise |
| ● | 00 | de | 2b | #00de2b | honeydewtab |
| ● | 00 | fa | 9a | #00fa9a | mediumspringgreen |
| ● | 00 | ff | 00 | #00ff00 | lime |
| ● | 00 | ff | 7f | #00ff7f | springgreen |
| ● | 00 | ff | ff | #00ffff | aqua |
| ● | 00 | ff | ff | #00ffff | cyan |
| ● | 19 | 19 | 70 | #191970 | midnightblue |
| ● | 1e | 90 | ff | #1e90ff | dodgerblue |
| ● | 20 | b2 | aa | #20b2aa | lightseagreen |
| ● | 22 | 8b | 22 | #228b22 | forestgreen |
| ● | 2e | 8b | 57 | #2e8b57 | seagreen |
| ● | 2f | 4f | 4f | #2f4f4f | darkslategray |
| ● | 32 | cd | 32 | #32cd32 | limegreen |
| ● | 3c | b3 | 71 | #3cb371 | mediumseagreen |
| ● | 40 | e0 | d0 | #40e0d0 | turquoise |
| ● | 41 | 69 | e1 | #4169e1 | royalblue |
| ● | 46 | 82 | b4 | #4682b4 | steelblue |
| ● | 48 | 3d | 8b | #483d8b | darkslateblue |
| ● | 48 | d1 | cc | #48d1cc | mediumturquoise |
| ● | 4b | 00 | 82 | #4b0082 | indigo |
| ● | 55 | 6b | 2f | #556b2f | darkolivegreen |
| ● | 5f | 9e | a0 | #5f9ea0 | cadetblue |
| ● | 64 | 95 | ed | #6495ed | cornflowerblue |
| ● | 66 | cd | aa | #66cdaa | mediumaquamarine |
| ● | 69 | 69 | 69 | #696969 | dimgray |
| ● | 6a | 5a | cd | #6a5acd | slateblue |
| ● | 6b | 8e | 23 | #6b8e23 | olivedrab |
| ● | 70 | 80 | 90 | #708090 | slategray |
| ● | 77 | 88 | 99 | #778899 | lightslategray |
| ● | 7b | 68 | ee | #7b68ee | mediumslateblue |
| ● | 7c | fc | 00 | #7cfc00 | lawngreen |
| ● | 7f | ff | 00 | #7fff00 | chartreuse |
| ● | 7f | ff | d4 | #7fffd4 | aquamarine |
| ● | 80 | 00 | 00 | #800000 | maroon |
| ● | 80 | 00 | 80 | #800080 | purple |
| ● | 80 | 80 | 00 | #808000 | olive |
| ● | 80 | 80 | 80 | #808080 | gray |
| ● | 87 | ce | eb | #87ceeb | skyblue |
| ● | 87 | ce | fa | #87cefa | lightskyblue |
| ● | 8a | 2b | e2 | #8a2be2 | blueviolet |
| ● | 8b | 00 | 00 | #8b0000 | darkred |
| ● | 8b | 00 | 8b | #8b008b | darkmagenta |
| ● | 8b | 45 | 13 | #8b4513 | saddlebrown |
| ● | 8f | bd | 8f | #8fbd8f | darkseagreen |
| ● | 90 | ee | 90 | #90ee90 | lightgreen |
| ● | 93 | 70 | db | #9370db | mediumpurple |
| ● | 94 | 00 | d3 | #9400d3 | darkviolet |
| ● | 98 | fb | 98 | #98fb98 | palegreen |
| ● | 99 | 32 | cc | #9932cc | darkorchid |
| ● | 9a | cd | 32 | #9acd32 | yellowgreen |
| ● | a0 | 52 | 2d | #a0522d | sienna |
| ● | a5 | 2a | 2a | #a52a2a | brown |
| ● | a9 | a9 | a9 | #a9a9a9 | darkgray |
| ● | ad | d8 | e6 | #add8e6 | lightblue |
| ● | ad | ff | 2f | #adff2f | greenyellow |
| ● | af | ee | ee | #afeeee | paleturquoise |
| ● | b0 | c4 | de | #b0c4de | lightsteelblue |
| ● | b0 | e0 | e6 | #b0e0e6 | powderblue |
| ● | b2 | 22 | 22 | #b22222 | firebrick |
| ● | b8 | 86 | 0b | #b8860b | darkgoldenrod |
| ● | ba | 55 | d3 | #ba55d3 | mediumorchid |
| ● | bc | 8f | 8f | #bc8f8f | rosybrown |
| ● | bd | b7 | 6b | #bdb76b | darkkhaki |
| ● | c0 | c0 | c0 | #c0c0c0 | silver |
| ● | c7 | 15 | 85 | #c71585 | mediumvioletred |
| ● | cd | 5c | 5c | #cd5c5c | indianred |
| ● | cd | 85 | 3f | #cd853f | peru |
| ● | d2 | 69 | 1e | #d2691e | chocolate |
| ● | d2 | b4 | 8c | #d2b48c | tan |
| ● | d3 | d3 | d3 | #d3d3d3 | lightgrey |
| ● | d8 | bf | d8 | #d8bfd8 | thistle |
| ● | da | 70 | d6 | #da70d6 | orchid |
| ● | da | a5 | 20 | #daa520 | goldenrod |
| ● | db | 70 | 93 | #db7093 | palevioletred |
| ● | dc | 14 | 3c | #dc143c | crimson |
| ● | dc | dc | dc | #dcdcdc | gainsboro |
| ● | dd | a0 | dd | #dda0dd | plum |
| ● | de | b8 | 87 | #deb887 | burlywood |
| ● | e0 | ff | ff | #e0ffff | lightcyan |
| ● | e6 | e6 | fa | #e6e6fa | lavender |
| ● | e9 | 96 | 7a | #e9967a | darksalmon |
| ● | ee | 82 | ee | #ee82ee | violet |
| ● | ee | e8 | aa | #eee8aa | palegoldenrod |
| ● | f0 | 80 | 80 | #f08080 | lightcoral |
| ● | f0 | e6 | 8c | #f0e68c | khaki |
| ● | f0 | f8 | ff | #f0f8ff | aliceblue |
| ● | f0 | ff | f0 | #f0fff0 | honeydew |
| ● | f0 | ff | ff | #f0ffff | azure |
| ● | f4 | a4 | 60 | #f4a460 | sandybrown |
| ● | f5 | de | b3 | #f5deb3 | wheat |
| ● | f5 | f5 | dc | #f5f5dc | beige |
| ● | f5 | f5 | f5 | #f5f5f5 | whitesmoke |
| ● | f5 | ff | fa | #f5fffa | mintcream |
| ● | f8 | f8 | ff | #f8f8ff | ghostwhite |
| ● | fa | 80 | 72 | #fa8072 | salmon |
| ● | fa | eb | d7 | #faebd7 | antiquewhite |
| ● | fa | f0 | e6 | #faf0e6 | linen |
| ● | fa | fa | d2 | #fafad2 | lightgoldenrodyellow |
| ● | fd | f5 | e6 | #fdf5e6 | oldlace |
| ● | ff | 00 | 00 | #ff0000 | red |
| ● | ff | 00 | ff | #ff00ff | fuchsia |
| ● | ff | 00 | ff | #ff00ff | magenta |
| ● | ff | 14 | 93 | #ff1493 | deeppink |
| ● | ff | 45 | 00 | #ff4500 | orangered |
| ● | ff | 63 | 47 | #ff6347 | tomato |
| ● | ff | 69 | b4 | #ff69b4 | hotpink |
| ● | ff | 7f | 50 | #ff7f50 | coral |
| ● | ff | 8c | 00 | #ff8c00 | darkorange |
| ● | ff | a0 | 7a | #ffa07a | lightsalmon |
| ● | ff | a5 | 00 | #ffa500 | orange |
| ● | ff | b6 | c1 | #ffb6c1 | lightpink |
| ● | ff | c0 | cb | #ffc0cb | pink |
| ● | ff | d7 | 00 | #ffd700 | gold |
| ● | ff | da | b9 | #ffdab9 | peachpuff |
| ● | ff | de | ad | #ffdead | navajowhite |
| ● | ff | e4 | b5 | #ffe4b5 | moccasin |
| ● | ff | e4 | c4 | #ffe4c4 | bisque |
| ● | ff | e4 | e1 | #ffe4e1 | mistyrose |
| ● | ff | eb | cd | #ffebcd | blanchedalmond |
| ● | ff | ef | d5 | #ffefd5 | papayawhip |
| ● | ff | f0 | f5 | #fff0f5 | lavenderblush |
| ● | ff | f5 | ee | #fff5ee | seashell |
| ● | ff | f8 | dc | #fff8dc | cornsilk |
| ● | ff | fa | cd | #fffacd | lemonchiffon |
| ● | ff | fa | f0 | #fffaf0 | floralwhite |
| ● | ff | fa | fa | #fffafa | snow |
| ● | ff | ff | 00 | #ffff00 | yellow |
| ● | ff | ff | e0 | #ffffe0 | lightyellow |
| ● | ff | ff | f0 | #fffff0 | ivory |
| ● | ff | ff | ff | #ffffff | white |
カラーコード、カラー名の使い方
スタイルシート
カラーコードやカラー名は、次に示すスタイルシートのコマンドで使うことができます。
- background
- border
- color
「background」では、背景色を指定します。「border」では、罫線の色を指定します。また、「color」では、文字の色を指定します。
１６進数の使い方
通常、数字は１０になったら、一桁あがります。これを１０進数と言います。１６進数とは、１６になったら一桁あがる数字のことです。コンピュータの処理では、１６進数が使われていますので、色の設定も１６進数で行われています。
このような１６進数の性質を知ることによって、カラーコードによる色の設定を、簡単に行えます。１６進数について、詳しく知りたい方は、「26.色の設定で必要な１６進数」をご覧ください。