色の指定

本項ではHTMLの記述でページに華やかさを持たせる点で欠かすことのできない色の指定方法について解説します。色の指定方法は2つに分けられるのでそれを学びましょう。

16進数表記

色の指定方法の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に該当します。

 0123456789ABCDEF
00163248648096112128144160176192208224240
11173349658197113129145161177193209225241
22183450668298114130146162178194210226242
33193551678399115131147163179195211227243
442036526884100116132148164180196212228244
552137536985101117133149165181197213229245
662238547086102118134150166182198214230246
772339557187103119135151167183199215231247
882440567288104120136152168184200216232248
992541577389105121137153169185201217233249
A102642587490106122138154170186202218234250
B112743597591107123139155171187203219235251
C122844607692108124140156172188204220236252
D132945617793109125141157173189205221237253
E143046627894110126142158174190206222238254
F153147637995111127143159175191207223239255

さて、カラーコードは通常#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