トップページへ戻る

CSS色見本

色の基本知識

ディスプレイに表示される色は、RGBすなわち光の三原色(赤:Red, 緑:Green, 青:Blue) の各要素の大きさで表すことができます。
平たく言いますと絵の具を混ぜる要領で色を作りだすことができるのです。
たとえば赤100%、緑0%、青100%の配分で組み合わせると紫色になるといった具合です。

色の指定方法

CSSで色を指定するには、以下の5通りの方法があります。

値(赤を表した例)説明
#f00 #と3つの文字(16進数)で色を示します。
この文字はそれぞれRGBの各要素と対応しています。

16進数とは0~15間での数値を1文字で表したものです。
0~9まではそのままですが、10は「a」、11は「b」,15は「f」というように10~15の値はアルファベットで表現します。
#ff0000 #と6つの文字(16進数)で色を示します。
この文字はそれぞれRGBの各要素2桁ずつと対応しています。
一般的にはこの形式が一番多く使われています。

2桁の16進数の場合は、0~255までの値を表すことができます。
0は「00」、15は「0f」、16は桁が繰り上がって「10」、255は「ff」と表します。
rgb(255, 0, 0); rgbという文字に続く括弧中に、RGBの各要素に対応する0~255までの数字をカンマで区切って指定します。
rgb(100%, 0%, 0%) rgbという文字に続く括弧中に、RGBの各要素に対応する0~100%までの割合をカンマで区切って指定します。
この値は小数点第一位まで指定することが可能です。
red 色の名前で指定します。
大文字、小文字はどちらでも構いません。
どのような名前が使用可能かは後述します。

色の名前

色の名前の一覧です。
名前、色相、明度、彩度順にそれぞれ並べ替えてあります。

【名前順】
色の名前RGB値
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
【色相順】
色の名前RGB値
LightPink#FFB6C1
Pink#FFC0CB
Crimson#DC143C
LavenderBlush#FFF0F5
PaleVioletRed#DB7093
HotPink#FF69B4
DeepPink#FF1493
MediumVioletRed#C71585
Orchid#DA70D6
Thistle#D8BFD8
Plum#DDA0DD
Violet#EE82EE
Magenta#FF00FF
Fuchsia#FF00FF
DarkMagenta#8B008B
Purple#800080
MediumOrchid#BA55D3
DarkViolet#9400D3
DarkOrchid#9932CC
Indigo#4B0082
BlueViolet#8A2BE2
MediumPurple#9370DB
MediumSlateBlue#7B68EE
SlateBlue#6A5ACD
DarkSlateBlue#483D8B
Lavender#E6E6FA
GhostWhite#F8F8FF
Blue#0000FF
MediumBlue#0000CD
MidnightBlue#191970
DarkBlue#00008B
Navy#000080
RoyalBlue#4169E1
CornflowerBlue#6495ED
LightSteelBlue#B0C4DE
LightSlateGray#778899
SlateGray#708090
DodgerBlue#1E90FF
AliceBlue#F0F8FF
SteelBlue#4682B4
LightSkyBlue#87CEFA
SkyBlue#87CEEB
DeepSkyBlue#00BFFF
LightBlue#ADD8E6
PowderBlue#B0E0E6
CadetBlue#5F9EA0
Azure#F0FFFF
LightCyan#E0FFFF
PaleTurquoise#AFEEEE
Cyan#00FFFF
Aqua#00FFFF
DarkTurquoise#00CED1
DarkSlateGray#2F4F4F
DarkCyan#008B8B
Teal#008080
MediumTurquoise#48D1CC
LightSeaGreen#20B2AA
Turquoise#40E0D0
Aquamarine#7FFFD4
MediumAquamarine#66CDAA
MediumSpringGreen#00FA9A
MintCream#F5FFFA
SpringGreen#00FF7F
MediumSeaGreen#3CB371
SeaGreen#2E8B57
Honeydew#F0FFF0
LightGreen#90EE90
PaleGreen#98FB98
DarkSeaGreen#8FBC8F
LimeGreen#32CD32
Lime#00FF00
ForestGreen#228B22
Green#008000
DarkGreen#006400
Chartreuse#7FFF00
LawnGreen#7CFC00
GreenYellow#ADFF2F
DarkOliveGreen#556B2F
YellowGreen#9ACD32
OliveDrab#6B8E23
Beige#F5F5DC
LightGoldenrodYellow#FAFAD2
Ivory#FFFFF0
LightYellow#FFFFE0
Yellow#FFFF00
Olive#808000
DarkKhaki#BDB76B
LemonChiffon#FFFACD
PaleGoldenrod#EEE8AA
Khaki#F0E68C
Gold#FFD700
Cornsilk#FFF8DC
Goldenrod#DAA520
DarkGoldenrod#B8860B
FloralWhite#FFFAF0
OldLace#FDF5E6
Wheat#F5DEB3
Moccasin#FFE4B5
Orange#FFA500
PapayaWhip#FFEFD5
BlanchedAlmond#FFEBCD
NavajoWhite#FFDEAD
AntiqueWhite#FAEBD7
Tan#D2B48C
BurlyWood#DEB887
Bisque#FFE4C4
DarkOrange#FF8C00
Linen#FAF0E6
Peru#CD853F
PeachPuff#FFDAB9
SandyBrown#F4A460
Chocolate#D2691E
SaddleBrown#8B4513
Seashell#FFF5EE
Sienna#A0522D
LightSalmon#FFA07A
Coral#FF7F50
OrangeRed#FF4500
DarkSalmon#E9967A
Tomato#FF6347
MistyRose#FFE4E1
Salmon#FA8072
Snow#FFFAFA
LightCoral#F08080
RosyBrown#BC8F8F
IndianRed#CD5C5C
Red#FF0000
Brown#A52A2A
FireBrick#B22222
DarkRed#8B0000
Maroon#800000
White#FFFFFF
WhiteSmoke#F5F5F5
Gainsboro#DCDCDC
LightGrey#D3D3D3
Silver#C0C0C0
DarkGray#A9A9A9
Gray#808080
DimGray#696969
Black#000000
【明度順】
色の名前RGB値
White#FFFFFF
WhiteSmoke#F5F5F5
Snow#FFFAFA
MistyRose#FFE4E1
Seashell#FFF5EE
Linen#FAF0E6
AntiqueWhite#FAEBD7
BlanchedAlmond#FFEBCD
PapayaWhip#FFEFD5
OldLace#FDF5E6
FloralWhite#FFFAF0
Cornsilk#FFF8DC
LemonChiffon#FFFACD
Beige#F5F5DC
LightGoldenrodYellow#FAFAD2
Ivory#FFFFF0
LightYellow#FFFFE0
Honeydew#F0FFF0
MintCream#F5FFFA
Azure#F0FFFF
LightCyan#E0FFFF
AliceBlue#F0F8FF
Lavender#E6E6FA
GhostWhite#F8F8FF
LavenderBlush#FFF0F5
Gainsboro#DCDCDC
LightGrey#D3D3D3
PeachPuff#FFDAB9
Bisque#FFE4C4
NavajoWhite#FFDEAD
Moccasin#FFE4B5
Wheat#F5DEB3
PaleGoldenrod#EEE8AA
PaleTurquoise#AFEEEE
Pink#FFC0CB
LightPink#FFB6C1
Silver#C0C0C0
LightCoral#F08080
Salmon#FA8072
LightSalmon#FFA07A
BurlyWood#DEB887
Khaki#F0E68C
LightGreen#90EE90
PaleGreen#98FB98
Aquamarine#7FFFD4
PowderBlue#B0E0E6
LightBlue#ADD8E6
SkyBlue#87CEEB
LightSkyBlue#87CEFA
LightSteelBlue#B0C4DE
Thistle#D8BFD8
Plum#DDA0DD
Violet#EE82EE
HotPink#FF69B4
DarkGray#A9A9A9
RosyBrown#BC8F8F
Tomato#FF6347
DarkSalmon#E9967A
Coral#FF7F50
SandyBrown#F4A460
Tan#D2B48C
DarkSeaGreen#8FBC8F
MediumAquamarine#66CDAA
CornflowerBlue#6495ED
MediumSlateBlue#7B68EE
MediumPurple#9370DB
Orchid#DA70D6
PaleVioletRed#DB7093
Gray#808080
IndianRed#CD5C5C
Red#FF0000
OrangeRed#FF4500
Peru#CD853F
DarkOrange#FF8C00
Orange#FFA500
Gold#FFD700
DarkKhaki#BDB76B
Yellow#FFFF00
YellowGreen#9ACD32
GreenYellow#ADFF2F
Chartreuse#7FFF00
LimeGreen#32CD32
Lime#00FF00
SpringGreen#00FF7F
Turquoise#40E0D0
MediumTurquoise#48D1CC
Cyan#00FFFF
Aqua#00FFFF
CadetBlue#5F9EA0
DeepSkyBlue#00BFFF
DodgerBlue#1E90FF
LightSlateGray#778899
SlateGray#708090
RoyalBlue#4169E1
Blue#0000FF
SlateBlue#6A5ACD
BlueViolet#8A2BE2
MediumOrchid#BA55D3
Magenta#FF00FF
Fuchsia#FF00FF
DeepPink#FF1493
DimGray#696969
Brown#A52A2A
FireBrick#B22222
Sienna#A0522D
Chocolate#D2691E
Goldenrod#DAA520
LawnGreen#7CFC00
MediumSeaGreen#3CB371
MediumSpringGreen#00FA9A
LightSeaGreen#20B2AA
DarkTurquoise#00CED1
SteelBlue#4682B4
MediumBlue#0000CD
DarkOrchid#9932CC
DarkViolet#9400D3
MediumVioletRed#C71585
Crimson#DC143C
SaddleBrown#8B4513
DarkGoldenrod#B8860B
OliveDrab#6B8E23
DarkOliveGreen#556B2F
ForestGreen#228B22
SeaGreen#2E8B57
DarkSlateBlue#483D8B
DarkRed#8B0000
Maroon#800000
Olive#808000
Green#008000
DarkSlateGray#2F4F4F
DarkCyan#008B8B
Teal#008080
MidnightBlue#191970
DarkBlue#00008B
Navy#000080
Indigo#4B0082
DarkMagenta#8B008B
Purple#800080
DarkGreen#006400
Black#000000
【彩度順】
色の名前RGB値
Snow#FFFAFA
MistyRose#FFE4E1
Seashell#FFF5EE
BlanchedAlmond#FFEBCD
PapayaWhip#FFEFD5
FloralWhite#FFFAF0
Cornsilk#FFF8DC
LemonChiffon#FFFACD
Ivory#FFFFF0
LightYellow#FFFFE0
Honeydew#F0FFF0
MintCream#F5FFFA
Azure#F0FFFF
LightCyan#E0FFFF
AliceBlue#F0F8FF
GhostWhite#F8F8FF
LavenderBlush#FFF0F5
PeachPuff#FFDAB9
Bisque#FFE4C4
NavajoWhite#FFDEAD
Moccasin#FFE4B5
Pink#FFC0CB
LightPink#FFB6C1
LightSalmon#FFA07A
Aquamarine#7FFFD4
HotPink#FF69B4
Tomato#FF6347
Coral#FF7F50
Red#FF0000
OrangeRed#FF4500
DarkOrange#FF8C00
Orange#FFA500
Gold#FFD700
Yellow#FFFF00
GreenYellow#ADFF2F
Chartreuse#7FFF00
Lime#00FF00
SpringGreen#00FF7F
Cyan#00FFFF
Aqua#00FFFF
DeepSkyBlue#00BFFF
DodgerBlue#1E90FF
Blue#0000FF
Magenta#FF00FF
Fuchsia#FF00FF
DeepPink#FF1493
LawnGreen#7CFC00
MediumSpringGreen#00FA9A
DarkTurquoise#00CED1
MediumBlue#0000CD
DarkViolet#9400D3
DarkRed#8B0000
Maroon#800000
Olive#808000
Green#008000
DarkCyan#008B8B
Teal#008080
DarkBlue#00008B
Navy#000080
Indigo#4B0082
DarkMagenta#8B008B
Purple#800080
DarkGreen#006400
Salmon#FA8072
PaleGreen#98FB98
LightSkyBlue#87CEFA
OldLace#FDF5E6
LightGoldenrodYellow#FAFAD2
SandyBrown#F4A460
MediumVioletRed#C71585
Crimson#DC143C
DarkGoldenrod#B8860B
AntiqueWhite#FAEBD7
Wheat#F5DEB3
LightCoral#F08080
Khaki#F0E68C
LightGreen#90EE90
SkyBlue#87CEEB
Violet#EE82EE
DarkSalmon#E9967A
CornflowerBlue#6495ED
MediumSlateBlue#7B68EE
Turquoise#40E0D0
RoyalBlue#4169E1
BlueViolet#8A2BE2
Chocolate#D2691E
Goldenrod#DAA520
SaddleBrown#8B4513
Linen#FAF0E6
Lavender#E6E6FA
PaleGoldenrod#EEE8AA
PaleTurquoise#AFEEEE
YellowGreen#9ACD32
LimeGreen#32CD32
FireBrick#B22222
LightSeaGreen#20B2AA
DarkOrchid#9932CC
OliveDrab#6B8E23
ForestGreen#228B22
MidnightBlue#191970
Beige#F5F5DC
BurlyWood#DEB887
PowderBlue#B0E0E6
LightBlue#ADD8E6
MediumAquamarine#66CDAA
MediumPurple#9370DB
Orchid#DA70D6
PaleVioletRed#DB7093
IndianRed#CD5C5C
Peru#CD853F
MediumTurquoise#48D1CC
SlateBlue#6A5ACD
MediumOrchid#BA55D3
Brown#A52A2A
Sienna#A0522D
SeaGreen#2E8B57
LightSteelBlue#B0C4DE
Plum#DDA0DD
Tan#D2B48C
MediumSeaGreen#3CB371
SteelBlue#4682B4
DarkKhaki#BDB76B
DarkOliveGreen#556B2F
DarkSlateBlue#483D8B
Thistle#D8BFD8
RosyBrown#BC8F8F
DarkSeaGreen#8FBC8F
CadetBlue#5F9EA0
DarkSlateGray#2F4F4F
LightSlateGray#778899
SlateGray#708090
White#FFFFFF
WhiteSmoke#F5F5F5
Gainsboro#DCDCDC
LightGrey#D3D3D3
Silver#C0C0C0
DarkGray#A9A9A9
Gray#808080
DimGray#696969
Black#000000