HTMLカラーコード

HTMLカラーコードとは、HTMLで色を表現するための文字列である。

概要

「#ff0000」のように、#（シャープ）の後の16進数（0～9＋A～F）6桁の英数字で色を表したもの。左から2桁ずつ、R（Red）・G（Green）・B（Blue）の数値を示し、それらを加法混色したときの色を表す。各RGBの値が00に近いほどその色が薄く、ffに近いほど濃くなる。各16×16=256段階で、この組み合わせにより合計16777216色を表現することができる。

#000000	#ff0000	#00ff00	#0000ff	#ffff00	#ff00ff	#00ffff	#ffffff

他にもたとえば、#8cc700  なら10進数に直せば R:140 G:199 B:0 となり、この記事にも使われている線の緑色になる。なおA～Fは大文字表記でも小文字表記（a～f）でも可。

16進数6桁（#******）の色表記と10進数の色表記の変換については外部サイトを参照。

ニコニコ動画では、プレミアム会員のみ 動画にHTMLカラーでのコメントが可能である。コマンド欄に「#******」と入力する。

HTML・CSSでの色指定方法

HTMLでの色の指定方法には、次の2通りがある。例として赤色  の指定方法を挙げる。

• #ff0000のように # + 16進数6桁のカラーコードで指定
• redのように、カラーネーム（下記CSS3で定義されている色一覧を参照）で指定

またCSSでは、上記の2つに加えて以下の3通りの方法が使用できる。

• #f00のように # + 16進数3桁のカラーコードで指定
• rgb(255,0,0)のようにrgb(【赤の値】,【緑の値】,【青の値】) を0～255の256段階で指定
• rgb(100%,0%,0%)のようにrgb(【赤の値】,【緑の値】,【青の値】) を0～100のパーセンテージで指定

なお3桁のカラーコードは、前から1桁ずつR,G,Bの値を表す。例えば#fe0は#ffee00と、#06eは#0066eeと同じ色となる。

ソースコード	表示結果
<p style="color:#1E90FF;">#1E90FF</p> <p style="color:forestgreen;">forestgreen</p> <p style="color:#bb5;">#bb5</p> <p style="color:rgb(255,51,0);">rgb(255,51,0)</p> <p style="color:rgb(80%,30%,80%);">rgb(80%,30%,80%)</p>	#1E90FF forestgreen #bb5 rgb(255,51,0) rgb(80%,30%,80%)

さらに、rgbaという表記も存在し、これは透明度(アルファチャンネル)を扱うことができる。CSSのopacityとの違いは、背景色に指定した場合に継承されることがなく、かつ背景と文字で異なる透明度を指定可能なので、背景色だけを透明にすることも可能である。文字が読みづらいと思ったらソースを見ればわかるのでソースを見てみよう。

文字を透明にしてみました。この下の背景(黄土色っぽいやつ)は赤(red)背景に黄緑(lime)を透明度0.5で重ね合わせて作ってます。青は完璧な青(blue、不透明)です。

HTMLカラーコード一覧

代表的なカラーコード

各色グラデーション

			#ffffff	#000000
#fcfcfc	#fffbfb	#fffffb	#fbfffb	#fbffff	#fbfdff	#fffbfd	#fffbff
#f9f9f9	#fff4f4	#fffff4	#f4fff4	#f4ffff	#f4faff	#fff4fa	#fff4ff
#f4f4f4	#ffeaea	#ffffea	#eaffea	#eaffff	#eaf4ff	#ffeaf4	#ffeaff
#efefef	#ffdfdf	#ffffdf	#dfffdf	#dfffff	#dfefff	#ffdfef	#ffdfff
#e9e9e9	#ffd5d5	#ffffd5	#d5ffd5	#d5ffff	#d5eaff	#ffd5ea	#ffd5ff
#dfdfdf	#ffbfbf	#ffffbf	#bfffbf	#bfffff	#bfdfff	#ffbfdf	#ffbfff
#bfbfbf	#ff8080	#ffff80	#80ff80	#80ffff	#80bfff	#ff80c0	#ff80ff
#7f7f7f	#ff0000	#ffff00	#80ff00	#00ffff	#0080ff	#ff0080	#ff00ff
#4a4a4a	#950000	#959500	#009500	#009595	#004a95	#95004a	#950095
#353535	#6a0000	#6a6a00	#006a00	#006a6a	#00356a	#6a0035	#6a006a

薄い色系

#ffeaeb	#ffeaf4	#ffeafa	#ffeaff	#f4eaff	#eaeaff	#eaf4ff	#eaffff
#eafff4	#eaffea	#f4ffea	#ffffea	#fff4ea	#ffefea	#f3f8f1	#f2f0f9
#fff9f9	#fff9fc	#fff9fe	#fff9ff	#fcf9ff	#fbf9ff	#f9f9ff	#f9fcff
#f9fffe	#f9fffc	#f9fff9	#fcfff9	#fffff9	#fffcf9	#fffbf9	#fdfdfb

渋い系

#d9e6df	#d9e6d9	#dfe6d9	#e6e6d9	#e6e2d9	#e6dfd9	#e6dcd9	#e6dbd9
#e8d7d7	#e6d9df	#e6d9e6	#dfd9e6	#dbd9e6	#d9dbe6	#d9dfe6	#d9e6e6
#add1d1	#add1c9	#add1bf	#add1b7	#b7d1ad	#d1d1ad	#d1bfad	#d1b7ad
#d1adae	#d1adbf	#d1add1	#bfadd1	#b7add1	#adadd1	#adb7d1	#adbfd1
#7a4546	#7a4560	#7a456d	#7a457a	#60457a	#45457a	#45607a	#457a7a
#457a6d	#457a53	#537a45	#7a7a45	#7a6d45	#7a6045	#7a5345	#7a4b45

グレイスケール

#fcfcfc	#f9f9f9	#f6f6f6	#f4f4f4	#efefef	#e9e9e9	#e4e4e4	#dfdfdf
#d9d9d9	#d4d4d4	#c9c9c9	#bfbfbf	#b4b4b4	#aaaaaa	#9f9f9f	#949494
#7f7f7f	#747474	#6a6a6a	#555555	#3f3f3f	#2a2a2a	#151515	#0a0a0a

Webセーフカラー

Webセーフカラー(256色環境でも再現される216色)

#000000	#000033	#000066	#000099	#0000cc	#0000ff
#003300	#003333	#003366	#003399	#0033cc	#0033ff
#006600	#006633	#006666	#006699	#0066cc	#0066ff
#009900	#009933	#009966	#009999	#0099cc	#0099ff
#00cc00	#00cc33	#00cc66	#00cc99	#00cccc	#00ccff
#00ff00	#00ff33	#00ff66	#00ff99	#00ffcc	#00ffff
#330000	#330033	#330066	#330099	#3300cc	#3300ff
#333300	#333333	#333366	#333399	#3333cc	#3333ff
#336600	#336633	#336666	#336699	#3366cc	#3366ff
#339900	#339933	#339966	#339999	#3399cc	#3399ff
#33cc00	#33cc33	#33cc66	#33cc99	#33cccc	#33ccff
#33ff00	#33ff33	#33ff66	#33ff99	#33ffcc	#33ffff
#660000	#660033	#660066	#660099	#6600cc	#6600ff
#663300	#663333	#663366	#663399	#6633cc	#6633ff
#666600	#666633	#666666	#666699	#6666cc	#6666ff
#669900	#669933	#669966	#669999	#6699cc	#6699ff
#66cc00	#66cc33	#66cc66	#66cc99	#66cccc	#66ccff
#66ff00	#66ff33	#66ff66	#66ff99	#66ffcc	#66ffff
#990000	#990033	#990066	#990099	#9900cc	#9900ff
#993300	#993333	#993366	#993399	#9933cc	#9933ff
#996600	#996633	#996666	#996699	#9966cc	#9966ff
#999900	#999933	#999966	#999999	#9999cc	#9999ff
#99cc00	#99cc33	#99cc66	#99cc99	#99cccc	#99ccff
#99ff00	#99ff33	#99ff66	#99ff99	#99ffcc	#99ffff
#cc0000	#cc0033	#cc0066	#cc0099	#cc00cc	#cc00ff
#cc3300	#cc3333	#cc3366	#cc3399	#cc33cc	#cc33ff
#cc6600	#cc6633	#cc6666	#cc6699	#cc66cc	#cc66ff
#cc9900	#cc9933	#cc9966	#cc9999	#cc99cc	#cc99ff
#cccc00	#cccc33	#cccc66	#cccc99	#cccccc	#ccccff
#ccff00	#ccff33	#ccff66	#ccff99	#ccffcc	#ccffff
#ff0000	#ff0033	#ff0066	#ff0099	#ff00cc	#ff00ff
#ff3300	#ff3333	#ff3366	#ff3399	#ff33cc	#ff33ff
#ff6600	#ff6633	#ff6666	#ff6699	#ff66cc	#ff66ff
#ff9900	#ff9933	#ff9966	#ff9999	#ff99cc	#ff99ff
#ffcc00	#ffcc33	#ffcc66	#ffcc99	#ffcccc	#ffccff
#ffff00	#ffff33	#ffff66	#ffff99	#ffffcc	#ffffff

基本16色(色名指定可能な色、これも256色環境でも再現される)

#000000(black)	#ff0000(red)	#00ff00(lime)	#0000ff(blue)
#ffff00(yellow)	#ff00ff(fuchsia)	#00ffff(aqua)	#ffffff(white)
#800000(maroon)	#008000(green)	#000080(navy)	#808000(olive)
#800080(purple)	#008080(teal)	#808080(gray)	#c0c0c0(silver)

カラーネーム

CSS3で定義されている色一覧(出典: CSS3 Color Module)

#F0F8FF(aliceblue)	#FAEBD7(antiquewhite)	#00FFFF(aqua, cyan)
#7FFFD4(aquamarine)	#F0FFFF(azure)	#F5F5DC(beige)	#FFE4C4(bisque)
#000000(black)	#FFEBCD(blanchedalmond)	#0000FF(blue)	#8A2BE2(blueviolet)
#A52A2A(brown)	#DEB887(burlywood)	#5F9EA0(cadetblue)	#7FFF00(chartreuse)
#D2691E(chocolate)	#FF7F50(coral)	#6495ED(cornflowerblue)	#FFF8DC(cornslik)
#DC143C(crimson)	#00008B(darkblue)	#008B8B(darkcyan)	#B8860B(darkgoldenrod)
#A9A9A9(darkgray, darkgrey)		#006400(darkgreen)	#BDB76B(darkkhaki)
#8B008B(darkmagenta)	#556B2F(darkolivegreen)	#FF8C00(darkorange)	#9932CC(darkorchid)
#8B0000(darkred)	#E9967A(darksalmon)	#8FBC8F(darkseagreen)	#483D8B(darkslateblue)
#2F4F4F(darkslategray, darkslategrey)		#00CED1(darkturquoise)	#9400D3(darkviolet)
#FF1493(deeppink)	#00BFFF(deepskyblue)	#696969(dimgray, dimgrey)
#1E90FF(dodgerblue)	#B22222(firebrick)	#FFFAF0(floralwhite)	#228B22(forestgreen)
#FF00FF(fuchsia, magenta)		#DCDCDC(gainsboro)	#F8F8FF(ghostwhite)
#FFD700(gold)	#DAA520(goldenrod)	#808080(gray, grey)
#008000(green)	#adff2f(greenyellow)	#F0FFF0(honeydew)	#FF69B4(hotpink)
#CD5C5C(indianred)	#4B0082(indigo)	#FFFFF0(ivory)	#F0E68C(khaki)
#E6E6FA(lavender)	#FFF0F5(lavenderblush)	#7CFC00(lawngreen)	#FFFACD(lemonchiffon)
#ADD8E6(lightblue)	#F08080(lightcoral)	#E0FFFF(lightcyan)	#FAFAD2(lightgoldenrodyellow)
#D3D3D3(lightgray, lightgrey)		#90EE90(lightgreen)	#FFB6C1(lightpink)
#FFA07A(lightsalmon)	#20B2AA(lightseagreen)	#778899(lightslategray, lightslategrey)
#87CEFA(lightskyblue)	#B0C4DE(lightsteelblue)	#FFFFE0(lightyellow)	#00FF00(lime)
#32CD32(limegreen)	#FAF0E6(linen)	#800000(maroon)	#66cdaa(mediumaquamarine)
#0000CD(mediumblue)	#BA55D3(mediumorchid)	#9370DB(mediumpurple)	#3CB371(mediumseagreen)
#7B68EE(mediumslateblue)	#00FA9A(mediumspringgreen)	#48D1CC(mediumturquoise)	#C71585(mediumvioletred)
#191970(midnightblue)	#F5FFFA(mintcream)	#FFE4E1(mistyrose)	#FFE4B5(moccasin)
#FFDEAD(navajowhite)	#000080(navy)	#FDF5E6(oldlace)	#808000(olive)
#6B8E23(olivedrab)	#FFA500(orange)	#FF4500(orangered)	#DA70D6(orchid)
#EEE8AA(palegoldenrod)	#98FB98(palegreen)	#AFEEEE(paleturquoise)	#DB7093(palevioletred)
#FFEFD5(papayawhip)	#FFDAB9(peachpuff)	#CD853F(peru)	#FFC0CB(pink)
#DDA0DD(plum)	#B0E0E6(powderblue)	#800080(purple)	#FF0000(red)
#BC8F8F(rosybrown)	#4169E1(royalblue)	#8B4513(saddlebrown)	#FA8072(salmon)
#F4A460(sandybrown)	#2E8B57(seagreen)	#FFF5EE(seashell)	#A0522D(sienna)
#C0C0C0(silver)	#87CEEB(skyblue)	#708090(slategray, slategrey)
#6A5ACD(slateblue)	#FFFAFA(snow)	#00FF7F(springgreen)	#4682B4(steelblue)
#D2B48C(tan)	#008080(teal)	#D8BFD8(thistle)	#FF6347(tomato)
#40E0D0(turquoise)	#EE82EE(violet)	#F5DEB3(wheat)	#FFFFFF(white)
#F5F5F5(whitesmoke)	#FFFF00(yellow)	#9ACD32(yellowgreen)	以上、合計138色

なお、Webカラーコードにおいてgreenは#008000だが、ニコニコのコメントではgreenは#00ff00(要するにWebのlimeと同じ)であることに注意。コメントの色について細かいことはコメントの項目を参照のこと。

関連項目

• HTML
• コメント
• コマンド
• 色の一覧