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

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

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

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

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

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

スタイルシート

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

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

16進数の使い方

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

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


ホームページ教室

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