HTML, CSS, JavaScriptでの色指定

このページのタグ:[HTML] [CSS] [JavaScript]
HTML,CSS, JavaScriptでの色指定の方法です。

カラー指定表記

カラーは以下の表記方法で指定できます。
表記方式値の範囲
#RGB#44F0~F
#RRGGBB#4040FF00~FF
rgb(r,g,b)rgb(64,64,255)0~255
rgb(r%,g%,b%)rgb(20%,30%,100%)0%~100%
hsl(h, s%, l%)hsl(0, 100%, 50%)h=0~360, sl=0%~100%
(名前の色)red

例1

background-color:#4040FF;

例2

border-color:rgb(32,255,64);

カラー名(基本)

カラー名の定義は以下の通りです。
色名#rrggbb表記RGB表記HSL表記カラー
black#000000rgb(0,0,0)hsl(0,0,0) 
silver#c0c0c0rgb(192,192,192)hsl(0,0,75.3%) 
gray#808080rgb(128,128,128)hsl(0,0,50.2%) 
white#ffffffrgb(255,255,255)hsl(0,0,100%) 
maroon#800000rgb(128,0,0)hsl(0,100%,25.1%) 
red#ff0000rgb(255,0,0)hsl(0,100%,50%) 
purple#800080rgb(128,0,128)hsl(300,100%,25.1%) 
fuchsia#ff00ffrgb(255,0,255)hsl(300,100%,25.1%) 
green#008000rgb(0,128,0)hsl(120,100%,25.1%) 
lime#00ff00rgb(0,255,0)hsl(120,100%,50%) 
olive#808000rgb(128,128,0)hsl(60,100%,25.1%) 
orange#ff8000rgb(255,128,0)hsl(30.1,100%,25.1%) 
yellow#ffff00rgb(255,255,0)hsl(60,100%,50%) 
navy#000080rgb(0,0,128)hsl(240,100%,25.1%) 
blue#0000ffrgb(0,0,255)hsl(240,100%,50%) 
teal#008080rgb(0,128,128)hsl(180,100%,25.1%) 
aqua#00ffffrgb(0,255,255)hsl(180,100%,50%) 

カラー名(基本+拡張)

色名#rrggbb表記RGB表記HSL表記カラー
snow#FFFAFArgb(255,250,250)hsl(0, 100% ,99%) 
floralwhite#FFFAF0rgb(255,250,240)hsl(40, 100% ,97.1%) 
ivory#FFFFF0rgb(255,255,240)hsl(60, 100% ,97.1%) 
honeydew#F0FFF0rgb(240,255,240)hsl(120, 100% ,97.1%) 
azure#F0FFFFrgb(240,255,255)hsl(180, 100% ,97.1%) 
lightcyan#E0FFFFrgb(224,255,255)hsl(180, 100% ,93.9%) 
aliceblue#F0F8FFrgb(240,248,255)hsl(208, 100% ,97.1%) 
lavenderblush#FFF0F5rgb(255,240,245)hsl(340, 100% ,97.1%) 
seashell#FFF0E6rgb(255,245,238)hsl(24.7, 100% ,96.7%) 
linen#FAF0E6rgb(250,240,230)hsl(30, 66.7% ,94.1%) 
antiquewhite#FAEBD7rgb(250,235,215)hsl(34.3, 77.8% ,91.2%) 
blanchedalmond#FFEBCDrgb(255,235,205)hsl(36, 100% ,90.2%) 
papayawhip#FFEFD5rgb(255,239,213)hsl(37.1, 100% ,91.8%) 
oldlace#FDF5E6rgb(253,245,230)hsl(37.1, 100% ,91.8%) 
cornsilk#FFF8DCrgb(255,248,220)hsl(48, 100% ,93.1%) 
lemonchiffon#FFFACDrgb(255,250,205)hsl(54, 100% ,90.2%)  
lightgoldenrodyellow#FAFAD2rgb(250,250,210)hsl(60, 80% ,90.2%) 
lightyellow#FFFFE0rgb(255,255,224)hsl(60, 80% ,90.2%) 
beige#F5F5DCrgb(245,245,220)hsl(60, 55.6% ,91.2%) 
ghostwhite#F8F8FFrgb(248,248,255)hsl(240, 100% ,98.6%) 
mintcream#F5FFFArgb(245,255,250)hsl(150, 100% ,98%) 
lavender#E6E6FArgb(230,230,250)hsl(240, 66.7% ,94.1%) 
mistyrose#FFE4B9rgb(255,228,225)hsl(6, 100% ,94.1%) 
peachpuff#FFDAB9rgb(255,218,185)hsl(28.3, 100% ,86.3%) 
bisque#FFE4B5rgb(255,228,196)hsl(32.5, 100% ,88.4%) 
navajowhite#FFDEADrgb(255,222,173)hsl(35.9, 100% ,83.9%) 
moccasin#FFE4B5rgb(255,228,181)hsl(38.1, 100% ,85.5%) 
wheat#F5DEB3rgb(245,222,179)hsl(39.1, 76.7% ,83.1%) 
palegoldenrod#EEE8AArgb(238,232,170)hsl(54.7, 66.7% ,80%) 
palegreen#98FB98rgb(152,251,152)hsl(120, 92.5% ,79%) 
paleturquoise#AFE0EErgb(175,238,238)hsl(180, 64.9% ,81%) 
powderblue#B0E0E6rgb(176,224,230)hsl(186.7, 51.9% ,79.6%) 
lightblue#ADD8E6rgb(173,216,230)hsl(194.7, 53.3% ,79%) 
lightsteelblue#B0C4DErgb(176,196,222)hsl(213.9, 41.1% ,78%) 
thistle#D8BFD8rgb(216,191,216)hsl(300, 24.3% ,79.8%) 
pink#FFC0CBrgb(255,192,203)hsl(349.5, 100% ,87.6%) 
lightpink#FFB6C1rgb(255,182,193)hsl(351, 100% ,85.7%) 
lightcoral#F08080rgb(240,128,128)hsl(0, 78.9% ,72.2%) 
salmon#FA8072rgb(250,128,114)hsl(6.2, 93.2% ,71.4%) 
darksalmon#E9967Argb(233,150,122)hsl(15.1, 71.6% ,69.6%) 
lightsalmon#FFA07Argb(255,160,122)hsl(20.5, 71.6% ,69.6%) 
burlywood#DEB887rgb(222,184,135)hsl(33.8, 56.9% ,70%) 
khaki#F0E68Crgb(240,230,140)hsl(54, 76.9% ,74.5%) 
lightgreen#90EE90rgb(144,238,144)hsl(120, 73.4% ,74.9%) 
aquamarine#7FFFD4rgb(127,255,212)hsl(159.8, 100% ,74.9%) 
skyblue#87CEEBrgb(135,206,235)hsl(197.4, 71.4% ,72.5%) 
lightskyblue#87CEFArgb(135,206,250)hsl(203, 92% ,75.5%) 
plum#DDA0DDrgb(221,160,221)hsl(300, 47.3% ,74.7%) 
violet#EE82EErgb(238,130,238)hsl(300, 76.1% ,72.2%)  
indianred#CD5C5Crgb(205,92,92)hsl(0, 53.1% ,58.2%) 
peru#CD853Frgb(205,133,63)hsl(29.6, 58.7% ,52.5%) 
tan#D2B48Crgb(210,180,140)hsl(34.2, 43.8% ,68.6%) 
darkkhaki#BDB76Brgb(189,183,107)hsl(55.6, 38.3% ,58%) 
mediumaquamarine#66CDAArgb(102,205,170)hsl(159.6, 50.7% ,60.2%) 
mediumturquoise#48D1CCrgb(72,209,204)hsl(177.8, 59.8% ,55.1%) 
turquoise#40E0D0rgb(64,224,208)hsl(174, 72.1% ,56.5%) 
cornflowerblue#6495EDrgb(100,149,237)hsl(218.5, 79.2% ,66.1%) 
royalblue#4169E1rgb(65,105,225)hsl(225, 72.7% ,56.9%) 
mediumslateblue#7B68EErgb(123,104,238)hsl(248.5, 79.8% ,67.1%) 
blueviolet#8A2BE2rgb(138,43,226)hsl(271.1, 75.9% ,52.7%) 
slateblue#6A5ACDrgb(106,90,205)hsl(248.3, 53.5% ,57.8%) 
mediumpurple#9370DBrgb(147,112,219)hsl(259.6, 59.8% ,64.9%) 
mediumorchid#BA55D3rgb(186,85,211)hsl(288.1, 58.9% ,58%) 
orchid#DA70D6rgb(218,112,214)hsl(302.2, 58.9% ,64.7%) 
palevioletred#DB7093rgb(219,112,147)hsl(340.4, 59.8% ,64.9%) 
red#FF0000rgb(255,0,0)hsl(0, 100% ,50%) 
orangered#FF4500rgb(255,69,0)hsl(16.2, 100% ,50%) 
tomato#FF6347rgb(255,99,71)hsl(9.1, 100% ,63.9%) 
coral#FF7F50rgb(255,127,80)hsl(16.1, 100% ,65.7%) 
darkorange#FF8C00rgb(255,140,0)hsl(32.9, 100% ,50%) 
orange#FFA500rgb(255,165,0)hsl(38.8, 100% ,50%) 
gold#FFD700rgb(255,215,0)hsl(50.6, 100% ,50%) 
yellow#FFFF00rgb(255,255,0)hsl(60, 100% ,50%) 
greenyellow#ADFF2Frgb(173,255,47)hsl(83.7, 100% ,59.2%) 
chartreuse#7FFF00rgb(127,255,0)hsl(90.1, 100% ,50%) 
lawngreen#7CFC00rgb(124,252,0)hsl(90.5, 100% ,49.4%) 
lime#00FF00rgb(0,255,0)hsl(120, 100% ,50%) 
springgreen#00FF7Frgb(0,255,127)hsl(149.8, 100% ,50%) 
mediumspringgreen#00FA9Argb(0,250,154)hsl(156.9, 100% ,49%) 
aqua#00FFFFrgb(0,255,255)hsl(180, 100% ,50%) 
darkturquoise#00CED1rgb(0,206,209)hsl(180.9, 100% ,41%) 
deepskyblue#00BFFFrgb(0,191,255)hsl(195.1, 100% ,50%) 
dodgerblue#1E90FFrgb(30,144,255)hsl(209.6, 100% ,55.9%) 
blue#0000FFrgb(0,0,255)hsl(240, 100% ,50%) 
mediumblue#0000CDrgb(0,0,205)hsl(240, 100% ,40.2%) 
darkviolet#9400D3rgb(148,0,211)hsl(282.1, 100% ,41.4%) 
fuchsia#FF00FFrgb(255,0,255)hsl(300, 100% ,27.3%) 
deeppink#FF1493rgb(255,20,147)hsl(327.6, 100% ,53.9%) 
hotpink#FF69B4rgb(255,105,180)hsl(330, 100% ,70.6%) 
firebrick#B22222rgb(178,34,34)hsl(0, 67.9% ,41.6%) 
brown#A52A2Argb(165,42,42)hsl(0, 59.4% ,40.6%) 
sienna#A0522Drgb(160,82,45)hsl(19.3, 56.1% ,40.2%) 
chocolate#D2691Ergb(210,105,30)hsl(25, 75% ,47.1%) 
darkgoldenrod#B8860Brgb(184,134,11)hsl(42.7, 88.7% ,38.2%) 
goldenrod#DAA520rgb(218,165,32)hsl(42.9, 74.4% ,49%) 
yellowgreen#9ACD32rgb(154,205,50)hsl(79.7, 60.8% ,50%) 
limegreen#32CD32rgb(50,205,50)hsl(120, 60.8% ,50%) 
mediumseagreen#3CB371rgb(60,179,113)hsl(146.7, 49.8% ,46.9%) 
lightseagreen#20B2AArgb(32,178,170)hsl(165.6, 69.5% ,41.2%) 
steelblue#4682B4rgb(70,130,180)hsl(207.3, 44% ,49%) 
darkslateblue#483D8Brgb(72,61,139)hsl(248.5, 39% ,39.2%) 
darkorchid#9932CCrgb(153,50,204)hsl(280.1, 60.6% ,49.8%) 
mediumvioletred#C71585rgb(199,21,133)hsl(322.2, 80.9% ,43.1%) 
crimson#DC143Crgb(220,20,60)hsl(348, 83.3% ,47.1%) 
darkred#8B0000rgb(139,0,0)hsl(0, 100% ,27.3%) 
maroon#800000rgb(128,0,0)hsl(0, 100% ,25.1%) 
saddlebrown#8B4513rgb(139,69,19)hsl(25, 75.9% ,31%) 
olive#808000rgb(128,128,0)hsl(60, 100% ,25.1%)  
olivedrab#6B8E23rgb(107,142,35)hsl(79.6, 60.5% ,34.7%)  
darkolivegreen#556B2Frgb(85,107,47)hsl(82, 39% ,30.2%)  
forestgreen#228B22rgb(34,139,34)hsl(120, 60.7% ,33.9%)  
green#008000rgb(0,128,0)hsl(120, 100% ,25.1%)  
darkgreen#006400rgb(0,100,0)hsl(120, 100% ,25.1%)  
seagreen#2E8B57rgb(46,139,87)hsl(146.5, 50.3% ,36.3%)  
darkcyan#008B8Brgb(0,139,139)hsl(180, 100% ,27.3%)  
teal#008080rgb(0,128,128)hsl(180, 100% ,25.1%)  
darkblue#00008Brgb(0,0,139)hsl(240, 100% ,27.3%)  
midnightblue#191970rgb(25,25,112)hsl(240, 63.5% ,26.9%)  
navy#000080rgb(0,0,128)hsl(240, 100% ,25.1%)  
indigo#4B0082rgb(75,0,130)hsl(274.6, 100% ,25.5%)  
darkmagenta#8B008Brgb(139,0,139)hsl(300, 100% ,27.3%)  
purple#800080rgb(128,0,128)hsl(300, 100% ,25.1%)  
rosybrown#BC8F8Frgb(188,143,143)hsl(0, 25.1% ,64.9%)  
darkseagreen#8FBC8Frgb(143,188,143)hsl(120, 25.1% ,64.9%)  
darkslategray#2F4F4Frgb(47,79,79)hsl(180, 25.4% ,24.7%)  
cadetblue#5F9EA0rgb(95,158,160)hsl(181.8, 25.5% ,50%) 
lightslategray#778899rgb(119,136,153)hsl(210, 14.3% ,53.3%) 
slategray#708090rgb(112,128,144)hsl(210, 12.6% ,50.2%) 
white#778899rgb(255,255,255)hsl(0, 0% ,100%) 
whitesmoke#F5F5F5rgb(245,245,245)hsl(0, 0% ,96.1%) 
gainsboro#DCDCDCrgb(220,220,220)hsl(0, 0% ,86.3%) 
lightgray#D3D3D3rgb(211,211,211)hsl(0, 0% ,82.7%) 
silver#C0C0C0rgb(192,192,192)hsl(0, 0% ,75.3%) 
darkgray#A9A9A9rgb(169,169,169)hsl(0, 0% ,66.3%) 
gray#808080rgb(128,128,128)hsl(0, 0% ,50.2%) 
dimgray#696969rgb(105,105,105)hsl(0, 0% ,41.2%) 
black#000000rgb(0,0,0)hsl(0, 0% ,0%) 

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)