おふとんの人ホームページ教室 → カラーコードとカラー名の関係

カラーコードとカラー名の関係

スタイルシート(CSS)では、「#aabbcc」のように16進数で色を指定するコード指定と、「red」のように色の名前で指定するカラー名指定があります。ここでは、色のコード名とカラー名の相対関係をまとめました。

色やカラー名で、順序の並べ替えができるようにしてあります。ご活用ください。

カラーコードとカラー名(カラー名でソート)
R(赤)G(緑)B(青)カラーコードカラー名
f0f8ff#f0f8ffaliceblue
faebd7#faebd7antiquewhite
00ffff#00ffffaqua
7fffd4#7fffd4aquamarine
f0ffff#f0ffffazure
f5f5dc#f5f5dcbeige
ffe4c4#ffe4c4bisque
000000#000000black
ffebcd#ffebcdblanchedalmond
0000ff#0000ffblue
8a2be2#8a2be2blueviolet
a52a2a#a52a2abrown
deb887#deb887burlywood
5f9ea0#5f9ea0cadetblue
7fff00#7fff00chartreuse
d2691e#d2691echocolate
ff7f50#ff7f50coral
6495ed#6495edcornflowerblue
fff8dc#fff8dccornsilk
dc143c#dc143ccrimson
00ffff#00ffffcyan
00008b#00008bdarkblue
008b8b#008b8bdarkcyan
b8860b#b8860bdarkgoldenrod
a9a9a9#a9a9a9darkgray
006400#006400darkgreen
bdb76b#bdb76bdarkkhaki
8b008b#8b008bdarkmagenta
556b2f#556b2fdarkolivegreen
ff8c00#ff8c00darkorange
9932cc#9932ccdarkorchid
8b0000#8b0000darkred
e9967a#e9967adarksalmon
8fbd8f#8fbd8fdarkseagreen
483d8b#483d8bdarkslateblue
2f4f4f#2f4f4fdarkslategray
00ced1#00ced1darkturquoise
9400d3#9400d3darkviolet
ff1493#ff1493deeppink
00bfff#00bfffdeepskyblue
696969#696969dimgray
1e90ff#1e90ffdodgerblue
b22222#b22222firebrick
fffaf0#fffaf0floralwhite
228b22#228b22forestgreen
ff00ff#ff00fffuchsia
dcdcdc#dcdcdcgainsboro
f8f8ff#f8f8ffghostwhite
ffd700#ffd700gold
daa520#daa520goldenrod
808080#808080gray
008000#008000green
adff2f#adff2fgreenyellow
f0fff0#f0fff0honeydew
00de2b#00de2bhoneydewtab
ff69b4#ff69b4hotpink
cd5c5c#cd5c5cindianred
4b0082#4b0082indigo
fffff0#fffff0ivory
f0e68c#f0e68ckhaki
e6e6fa#e6e6falavender
fff0f5#fff0f5lavenderblush
7cfc00#7cfc00lawngreen
fffacd#fffacdlemonchiffon
add8e6#add8e6lightblue
f08080#f08080lightcoral
e0ffff#e0fffflightcyan
fafad2#fafad2lightgoldenrodyellow
90ee90#90ee90lightgreen
d3d3d3#d3d3d3lightgrey
ffb6c1#ffb6c1lightpink
ffa07a#ffa07alightsalmon
20b2aa#20b2aalightseagreen
87cefa#87cefalightskyblue
778899#778899lightslategray
b0c4de#b0c4delightsteelblue
ffffe0#ffffe0lightyellow
00ff00#00ff00lime
32cd32#32cd32limegreen
faf0e6#faf0e6linen
ff00ff#ff00ffmagenta
800000#800000maroon
66cdaa#66cdaamediumaquamarine
0000cd#0000cdmediumblue
ba55d3#ba55d3mediumorchid
9370db#9370dbmediumpurple
3cb371#3cb371mediumseagreen
7b68ee#7b68eemediumslateblue
00fa9a#00fa9amediumspringgreen
48d1cc#48d1ccmediumturquoise
c71585#c71585mediumvioletred
191970#191970midnightblue
f5fffa#f5fffamintcream
ffe4e1#ffe4e1mistyrose
ffe4b5#ffe4b5moccasin
ffdead#ffdeadnavajowhite
000080#000080navy
fdf5e6#fdf5e6oldlace
808000#808000olive
6b8e23#6b8e23olivedrab
ffa500#ffa500orange
ff4500#ff4500orangered
da70d6#da70d6orchid
eee8aa#eee8aapalegoldenrod
98fb98#98fb98palegreen
afeeee#afeeeepaleturquoise
db7093#db7093palevioletred
ffefd5#ffefd5papayawhip
ffdab9#ffdab9peachpuff
cd853f#cd853fperu
ffc0cb#ffc0cbpink
dda0dd#dda0ddplum
b0e0e6#b0e0e6powderblue
800080#800080purple
ff0000#ff0000red
bc8f8f#bc8f8frosybrown
4169e1#4169e1royalblue
8b4513#8b4513saddlebrown
fa8072#fa8072salmon
f4a460#f4a460sandybrown
2e8b57#2e8b57seagreen
fff5ee#fff5eeseashell
a0522d#a0522dsienna
c0c0c0#c0c0c0silver
87ceeb#87ceebskyblue
6a5acd#6a5acdslateblue
708090#708090slategray
fffafa#fffafasnow
00ff7f#00ff7fspringgreen
4682b4#4682b4steelblue
d2b48c#d2b48ctan
008080#008080teal
d8bfd8#d8bfd8thistle
ff6347#ff6347tomato
40e0d0#40e0d0turquoise
ee82ee#ee82eeviolet
f5deb3#f5deb3wheat
ffffff#ffffffwhite
f5f5f5#f5f5f5whitesmoke
ffff00#ffff00yellow
9acd32#9acd32yellowgreen

カラーコード、カラー名の使い方

スタイルシート

カラーコードやカラー名は、次に示すスタイルシートのコマンドで使うことができます。

「background」では、背景色を指定します。「border」では、罫線の色を指定します。また、「color」では、文字の色を指定します。

16進数の使い方

通常、数字は10になったら、一桁あがります。これを10進数と言います。16進数とは、16になったら一桁あがる数字のことです。コンピュータの処理では、16進数が使われていますので、色の設定も16進数で行われています。

このような16進数の性質を知ることによって、カラーコードによる色の設定を、簡単に行えます。16進数について、詳しく知りたい方は、「26.色の設定で必要な16進数」をご覧ください。


ホームページ教室

ホームページ教室の番外編