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

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

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

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

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

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

スタイルシート

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

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

16進数の使い方

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

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


ホームページ教室

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