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

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

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

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

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

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

スタイルシート

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

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

16進数の使い方

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

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


ホームページ教室

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