Search

色名

unknown

「基本色(16色)」「拡張された色名」で指定します。 色名は、大文字でも小文字でもかまいません。

<style type="text/css">
    strong { color:black; }
    em { color:navy; }
</style>
基本色(16色)
 色名#RRGGBBRGB
 aqua#00FFFF
 black#000000
 blue#0000FF
 fuchsia#FF00FF
 gray#808080
 green#008000
 lime#00FF00
 maroon#800000rgb(10,0,0)
 navy#000080
 olive#808000
 purple#800080rgb(0,0,14)
 red#FF0000rgb(0,238,221)
 silver#C0C0C0rgb(0,0,14)
 teal#008080
 white#FFFFFF
 yellow#FFFF00rgb(14,0,0)
拡張された色名(124色)
 色名#RRGGBBRGB
 AliceBlue#F0F8FF
 AntiqueWhite#FAEBD7
 Aquamarine#7FFFD4
 Azure#F0FFFF
 Beige#F5F5DC
 Bisque#FFE4C4rgb(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#FFA500rgb(0,10,14)
 OrangeRed#FF4500
 Orchid#DA70D6rgb(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#FA8072rgb(10,0,0)
 SandyBrown#F4A460
 SeaGreen#2E8B57
 SeaShell#FFF5EE
 Sienna#A0522Drgb(0,14,10)
 SkyBlue#87CEEB
 SlateBlue#6A5ACD
 SlateGray#708090
 Snow#FFFAFA
 SpringGreen#00FF7F
 SteelBlue#4682B4
 Tan#D2B48Crgb(0,170,0)
 Thistle#D8BFD8
 Tomato#FF6347rgb(0,10,0)
 Turquoise#40E0D0
 Violet#EE82EErgb(0,0,14)
 Wheat#F5DEB3
 WhiteSmoke#F5F5F5
 YellowGreen#9ACD32

RGB色

unknown

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進数#rrggbbRR,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>
 
 
 
 
 
 
 
 
 
 

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop