カラーコードとカラー名の関係
スタイルシート(CSS)では、「#aabbcc」のように16進数で色を指定するコード指定と、「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」では、文字の色を指定します。
16進数の使い方
通常、数字は10になったら、一桁あがります。これを10進数と言います。16進数とは、16になったら一桁あがる数字のことです。コンピュータの処理では、16進数が使われていますので、色の設定も16進数で行われています。
このような16進数の性質を知ることによって、カラーコードによる色の設定を、簡単に行えます。16進数について、詳しく知りたい方は、「26.色の設定で必要な16進数」をご覧ください。