基本色の指定
色名
unknown
「基本色(16色)」と「拡張された色名」で指定します。 色名は、大文字でも小文字でもかまいません。
<style type="text/css"> strong { color:black; } em { color:navy; } </style>
色名 | #RRGGBB | RGB | |
---|---|---|---|
aqua | #00FFFF | ||
black | #000000 | ||
blue | #0000FF | ||
fuchsia | #FF00FF | ||
gray | #808080 | ||
green | #008000 | ||
lime | #00FF00 | ||
maroon | #800000 | rgb(10,0,0) | |
navy | #000080 | ||
olive | #808000 | ||
purple | #800080 | rgb(0,0,14) | |
red | #FF0000 | rgb(0,238,221) | |
silver | #C0C0C0 | rgb(0,0,14) | |
teal | #008080 | ||
white | #FFFFFF | ||
yellow | #FFFF00 | rgb(14,0,0) |
色名 | #RRGGBB | RGB | |
---|---|---|---|
AliceBlue | #F0F8FF | ||
AntiqueWhite | #FAEBD7 | ||
Aquamarine | #7FFFD4 | ||
Azure | #F0FFFF | ||
Beige | #F5F5DC | ||
Bisque | #FFE4C4 | rgb(11,0,14) | |
BlanchedAlmond | #FFEBCD | ||
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 | ||
Gainsboro | #DCDCDC | ||
GhostWhite | #F8F8FF | ||
Gold | #FFD700 | ||
GoldenRod | #DAA520 | ||
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 | ||
LightGrey | #D3D3D3 | ||
LightGreen | #90EE90 | ||
LightPink | #FFB6C1 | ||
LightSalmon | #FFA07A | ||
LightSeaGreen | #20B2AA | ||
LightSkyBlue | #87CEFA | ||
LightSlateGray | #778899 | ||
LightSteelBlue | #B0C4DE | ||
LightYellow | #FFFFE0 | ||
LimeGreen | #32CD32 | ||
Linen | #FAF0E6 | ||
Magenta | #FF00FF | ||
MediumAquaMarine | #66CDAA | ||
MediumBlue | #0000CD | ||
MediumOrchid | #BA55D3 | ||
MediumPurple | #9370D8 | ||
MediumSeaGreen | #3CB371 | ||
MediumSlateBlue | #7B68EE | ||
MediumSpringGreen | #00FA9A | ||
MediumTurquoise | #48D1CC | ||
MediumVioletRed | #C71585 | ||
MidnightBlue | #191970 | ||
MintCream | #F5FFFA | ||
MistyRose | #FFE4E1 | ||
Moccasin | #FFE4B5 | ||
NavajoWhite | #FFDEAD | ||
OldLace | #FDF5E6 | ||
OliveDrab | #6B8E23 | ||
Orange | #FFA500 | rgb(0,10,14) | |
OrangeRed | #FF4500 | ||
Orchid | #DA70D6 | rgb(0,12,13) | |
PaleGoldenRod | #EEE8AA | ||
PaleGreen | #98FB98 | ||
PaleTurquoise | #AFEEEE | ||
PaleVioletRed | #D87093 | ||
PapayaWhip | #FFEFD5 | ||
PeachPuff | #FFDAB9 | ||
Peru | #CD853F | ||
Pink | #FFC0CB | ||
Plum | #DDA0DD | ||
PowderBlue | #B0E0E6 | ||
RosyBrown | #BC8F8F | ||
RoyalBlue | #4169E1 | ||
SaddleBrown | #8B4513 | ||
Salmon | #FA8072 | rgb(10,0,0) | |
SandyBrown | #F4A460 | ||
SeaGreen | #2E8B57 | ||
SeaShell | #FFF5EE | ||
Sienna | #A0522D | rgb(0,14,10) | |
SkyBlue | #87CEEB | ||
SlateBlue | #6A5ACD | ||
SlateGray | #708090 | ||
Snow | #FFFAFA | ||
SpringGreen | #00FF7F | ||
SteelBlue | #4682B4 | ||
Tan | #D2B48C | rgb(0,170,0) | |
Thistle | #D8BFD8 | ||
Tomato | #FF6347 | rgb(0,10,0) | |
Turquoise | #40E0D0 | ||
Violet | #EE82EE | rgb(0,0,14) | |
Wheat | #F5DEB3 | ||
WhiteSmoke | #F5F5F5 | ||
YellowGreen | #9ACD32 |
RGB色
unknown
rgb(x,y,x)
rgb(%x,%y,%x)
rgb(%x,%y,%x)
色を、R(赤)、G(緑)、B(青)の3原色で指定します。
RGBA色
unknown
rgba(x,y,x,alpha)
色を、R(赤)、G(緑)、B(青)の3原色と透過度を組み合わせて指定します。 RGB色に透過度を指定して、半透明の画像を表現することができます。
色指定値(#RRGGBB形式)
unknown
#rrggbb
R(赤)、G(緑)、B(青)の3原色の組み合わせを色指定値で指定します。 色名にはない微妙な色も指定することが可能です。
管理人は、画面上の色を確認したり、色の調合をするのに、FE-Color Palette(HTML色作成・確認ソフト) というフリーソフトを使用しています。rgb(r,g,b)、#rgb、#rrggbb の3形式に対応していて使い勝手もよいです。
16進数 | #rrggbb | RR,GG,BBを16進数で指定(00~FFの範囲) |
---|---|---|
#rgb | #rrggbbの簡易指定。RR, GG, BBを16進数で指定(0~Fの範囲) | |
10進数 | rgb(r,g,b) | R,G,Bを0~255の範囲の10進数で指定 |
%指定 | rgbr(%,g%,b%) | R,G,Bを0~100%の範囲の%で指定 |
<style type="text/css"> /* 文字色を'青(blue)'に指定 */ em { color:#0000ff; } /* #rrggbb */ em { color:#00f; } /* #rgb */ em { color:rgb(0,0,255); } /* rgb(r,g,b) */ em { color:rgb(0%,0%,100%); } /* rgbr(%,g%,b%)*/ </style>
HSL色 [CSS3]
unknown
hsl(hue,saturation,lightness)
hueには色相、saturationには彩度、lightnessには輝度を指定します。 色相は0〜359の数値、彩度と輝度は0~100%で指定します。
HSLA色 [CSS3]
unknown
hsla(hue,saturation,lightness,alpha)
RGB色にRGBA色があるのと同様、HSL色に透明度を指定したものになります。
<div style="background-color: hsla(256,100%,50%,0.1);"> </div> <div style="background-color: hsla(256,100%,50%,0.2);"> </div> <div style="background-color: hsla(256,100%,50%,0.3);"> </div> <div style="background-color: hsla(256,100%,50%,0.4);"> </div> <div style="background-color: hsla(256,100%,50%,0.5);"> </div> <div style="background-color: hsla(256,100%,50%,0.6);"> </div> <div style="background-color: hsla(256,100%,50%,0.7);"> </div> <div style="background-color: hsla(256,100%,50%,0.8);"> </div> <div style="background-color: hsla(256,100%,50%,0.9);"> </div> <div style="background-color: hsla(256,100%,50%,1);"> </div>