本項ではHTMLの記述でページに華やかさを持たせる点で欠かすことのできない色の指定方法について解説します。色の指定方法は2つに分けられるのでそれを学びましょう。
色の指定方法の1つ目は16進数表記です。これは、RGB値の各色の濃度を記述することで16,777,216通りの色を自在に指定する方法です。ここでRGBとはRed(赤)、Green(緑)、Blue(青)の光の3元色の頭文字です。
ところで16進数とはどのような数なのでしょうか。人が物を数える時使うのは数は一般に10進数です。これは0,1,2,…,8,9,10,11,…と数え上げていきます。0〜9までの10の数字を使い、一の位が9まで達すると桁上がりをします。16進数では0,1,2,…,8,9,A,B,…,E,F,10,11,…,9E,9F,A0,…と増えていきます。10進数の10〜15に当たる部分がA,B,…,E,Fに置き換わってしまうのです。下の表は10進数と16進数の対応表となります。縦の0〜Fが一の位、横の0〜Fが十の位を表します。例えば10進数の100は縦が4で横が6であり、16進数では64であることが分かります。カラーコードでは2桁の16進数を扱います。これは10進数での0〜255に該当します。
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | |
0 | 0 | 16 | 32 | 48 | 64 | 80 | 96 | 112 | 128 | 144 | 160 | 176 | 192 | 208 | 224 | 240 |
1 | 1 | 17 | 33 | 49 | 65 | 81 | 97 | 113 | 129 | 145 | 161 | 177 | 193 | 209 | 225 | 241 |
2 | 2 | 18 | 34 | 50 | 66 | 82 | 98 | 114 | 130 | 146 | 162 | 178 | 194 | 210 | 226 | 242 |
3 | 3 | 19 | 35 | 51 | 67 | 83 | 99 | 115 | 131 | 147 | 163 | 179 | 195 | 211 | 227 | 243 |
4 | 4 | 20 | 36 | 52 | 68 | 84 | 100 | 116 | 132 | 148 | 164 | 180 | 196 | 212 | 228 | 244 |
5 | 5 | 21 | 37 | 53 | 69 | 85 | 101 | 117 | 133 | 149 | 165 | 181 | 197 | 213 | 229 | 245 |
6 | 6 | 22 | 38 | 54 | 70 | 86 | 102 | 118 | 134 | 150 | 166 | 182 | 198 | 214 | 230 | 246 |
7 | 7 | 23 | 39 | 55 | 71 | 87 | 103 | 119 | 135 | 151 | 167 | 183 | 199 | 215 | 231 | 247 |
8 | 8 | 24 | 40 | 56 | 72 | 88 | 104 | 120 | 136 | 152 | 168 | 184 | 200 | 216 | 232 | 248 |
9 | 9 | 25 | 41 | 57 | 73 | 89 | 105 | 121 | 137 | 153 | 169 | 185 | 201 | 217 | 233 | 249 |
A | 10 | 26 | 42 | 58 | 74 | 90 | 106 | 122 | 138 | 154 | 170 | 186 | 202 | 218 | 234 | 250 |
B | 11 | 27 | 43 | 59 | 75 | 91 | 107 | 123 | 139 | 155 | 171 | 187 | 203 | 219 | 235 | 251 |
C | 12 | 28 | 44 | 60 | 76 | 92 | 108 | 124 | 140 | 156 | 172 | 188 | 204 | 220 | 236 | 252 |
D | 13 | 29 | 45 | 61 | 77 | 93 | 109 | 125 | 141 | 157 | 173 | 189 | 205 | 221 | 237 | 253 |
E | 14 | 30 | 46 | 62 | 78 | 94 | 110 | 126 | 142 | 158 | 174 | 190 | 206 | 222 | 238 | 254 |
F | 15 | 31 | 47 | 63 | 79 | 95 | 111 | 127 | 143 | 159 | 175 | 191 | 207 | 223 | 239 | 255 |
さて、カラーコードは通常#000000と表されます。数字部分は2桁ずつ左から赤、緑、青を表します。#000000は全ての色が0で黒色となります。逆に#FFFFFFは全ての色に満たされるので白色となります。どのような色になるかは光の三原色をイメージしてください。#123456とした場合は、赤12、緑34、青56となります。以下は代表的な色です。
ところで、カラーコードにはセーフカラーと呼ばれるものがあります。これは機種による違いが無い色のことです。セーフカラーはRGBの各値が16進法の00、33、66、99、CC、FFのいずれかである必要があります。これらの色は%で表すと0、20、40、60、80、100%に該当しています。各色で6段階存在するため、組み合わせは216通りとなります。
英名のカラーは140色用意されており、大文字小文字の区別はありません。英名でも指定することが可能ですが、16進数を使うことをお勧めします。※一部の色は別名称ですが同じ色です。
カラーネーム一覧 |
---|
AliceBlue #F0F8FF |
AntiqueWhite #FAEBD7 |
Aqua #00FFFF |
Aquamarine #7FFFD4 |
Azure #F0FFFF |
Beige #F5F5DC |
Bisque #FFE4C4 |
Black #000000 |
BlancheDalmond #FFEBCD |
Blue #0000FF |
BlueViolet #8A2BE2 |
Brown #A52A2A |
BurlyWood #DEB887 |
CadetBlue #5F9EA0 |
Chartreuse #7FFF00 |
Chocolate #D2691E |
Coral #FF7F50 |
CornFlowerBlue #6495ED |
CornSilk #FFF8DC |
Crimson #DC143C |
Cyan #00FFFF |
DarkBlue #00008B |
DarkCyan #008B8B |
DarkGoldenrod #B8860B |
DarkGray #A9A9A9 |
DarkGreen #006400 |
DarkKhaki #BDB76B |
DarkMagenta #8B008B |
DarkOliveGreen #556B2F |
DarkOrange #FF8C00 |
DarkOrchid #9932CC |
DarkRed #8B0000 |
DarkSalmon #E9967A |
DarkSeaGreen #8FBC8F |
DarksLateBlue #483D8B |
DarksLateGray #2F4F4F |
DarkTurquoise #00CED1 |
DarkViolet #9400D3 |
DeepPink #FF1493 |
DeepSkyBlue #00BFFF |
DimGray #696969 |
DodgerBlue #1E90FF |
Firebrick #B22222 |
FloralWhite #FFFAF0 |
ForestGreen #228B22 |
Fuchsia #FF00FF |
GainsBoro #DCDCDC |
GhostWhite #F8F8FF |
Gold #FFD700 |
GoldenRod #DAA520 |
Gray #808080 |
Green #008000 |
GreenYellow #ADFF2F |
Honeydew #F0FFF0 |
HotPink #FF69B4 |
IndianRed #CD5C5C |
Indigo #4B0082 |
Ivory #FFFFF0 |
Khaki #F0E68C |
Lavender #E6E6FA |
LavenderBlush #FFF0F5 |
LawnGreen #7CFC00 |
LemonChiffon #FFFACD |
LightBlue #ADD8E6 |
LightCoral #F08080 |
LightCyan #E0FFFF |
LightGoldenRodYellow #FAFAD2 |
LightGreen #90EE90 |
LightGrey #D3D3D3 |
LightPink #FFB6C1 |
LightSalmon #FFA07A |
LightSeaGreen #20B2AA |
LightSkyBlue #87CEFA |
LightSlateGray #778899 |
LightSteelBlue #B0C4DE |
LightYellow #FFFFE0 |
Lime #00FF00 |
LimeGreen #32CD32 |
Linen #FAF0E6 |
Magenta #FF00FF |
Maroon #800000 |
MediumAquamarine #66CDAA |
MediumBlue #0000CD |
MediumOrchid #BA55D3 |
MediumPurple #9370DB |
MediumSeaGreen #3CB371 |
MediumSlateBlue #7B68EE |
MediumSpringGreen #00FA9A |
MediumTurquoise #48D1CC |
MediumVioletRed #C71585 |
MidnightBlue #191970 |
MintCream #F5FFFA |
MistyRose #FFE4E1 |
Moccasin #FFE4B5 |
NavajoWhite #FFDEAD |
Navy #000080 |
Oldlace #FDF5E6 |
Olive #808000 |
OliveDrab #6B8E23 |
Orange #FFA500 |
OrangeRed #FF4500 |
Orchid #DA70D6 |
PaleGoldenRod #EEE8AA |
PaleGreen #98FB98 |
PaleTurquoise #AFEEEE |
PaleVioletRed #DB7093 |
Papayawhip #FFEFD5 |
PeachPuff #FFDAB9 |
Peru #CD853F |
Pink #FFC0CB |
Plum #DDA0DD |
PowderBlue #B0E0E6 |
Purple #800080 |
Red #FF0000 |
RosyBrown #BC8F8F |
RoyalBlue #4169E1 |
SaddleBrown #8B4513 |
Salmon #FA8072 |
SandyBrown #F4A460 |
SeaGreen #2E8B57 |
SeaShell #FFF5EE |
Sienna #A0522D |
Silver #C0C0C0 |
SkyBlue #87CEEB |
SlateBlue #6A5ACD |
SlateGray #708090 |
Snow #FFFAFA |
SpringGreen #00FF7F |
SteelBlue #4682B4 |
Tan #D2B48C |
Teal #008080 |
Thistle #D8BFD8 |
Tomato #FF6347 |
Turquoise #40E0D0 |
Violet #EE82EE |
Wheat #F5DEB3 |
White #FFFFFF |
WhiteSmoke #F5F5F5 |
Yellow #FFFF00 |
YellowGreen #9ACD32 |