HTMLカラーコード単語

3件

エイチティーエムエルカラーコード

7.8千文字の記事

掲示板へ

記事編集

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

概要

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

#000000	#ff0000	#00ff00	#0000ff	#ff ff00	#ff 00ff	#00f fff	#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と同じ色となる。

ソースコード

表示結果

#1E90FF

forest green

#bb5

rgb(255,51,0)

rgb(80%,30%,80%)

#1E90FF

forest green

#bb5

rgb(255,51,0)

rgb(80%,30%,80%)

さらに、rgbaという表記も存在し、これは透明度（アルファチャンネル）を扱うことができる。CSSのopacityとの違いは、背景色に指定した場合に継承されることがなく、かつ背景と文字で異なる透明度を指定可能なので、背景色だけを透明にすることも可能である。ただし、大百科では使えないため注意。

HTMLカラーコード一覧

代表的なカラーコード

各色グラデーション

			#ffffff	#000000
#fc fc fc	#fffbfb	#fffffb	#fbf ffb	#fbf fff	#fbfd ff	#fffbfd	#fffbff
#f9 f9 f9	#ff f4f4	#fffff4	#f4f ff4	#f4f fff	#f4faff	#ff f4fa	#ff f4ff
#f4f4f4	#ffeaea	#ff ffea	#eaffea	#eaff ff	#eaf4ff	#ffeaf4	#ffeaff
#efe fef	#ffdfdf	#ff ffdf	#dff fdf	#dff fff	#dfe fff	#ff dfef	#ff dfff
#e9e9e9	#ffd5d5	#ff ffd5	#d5ffd5	#d5ff ff	#d5eaff	#ffd5ea	#ffd5ff
#dfd fdf	#ff bf bf	#ff ff bf	#bf ff bf	#bf ff ff	#bfd fff	#ff bfdf	#ff bf ff
#bf bf bf	#ff8080	#ff ff80	#80ff80	#80ff ff	#80bf ff	#ff80c0	#ff80ff
#7f7f7f	#ff0000	#ff ff00	#80ff00	#00f fff	#0080 ff	#ff 0080	#ff 00ff
#4a 4a 4a	#950000	#959500	#009 500	#009595	#004a95	#9500 4a	#950095
#353535	#6a0000	#6a6a00	#006a00	#006a6a	#00356a¥	#6a0035	#6a006a

薄い色系

#ffeaeb	#ffeaf4	#ffeafa	#ffeaff	#f4eaff	#eaeaff	#eaf4ff	#eaff ff
#eafff4	#eaffea	#f4f fea	#ff ffea	#fff4ea	#ffefea	#f3f8f1	#f2f0f9
#ff f9 f9	#ff f9 fc	#ff f9 fe	#ff f9 ff	#fc f9 ff	#fbf9ff	#f9 f9 ff	#f9 fc ff
#f9 ff fe	#f9 ff fc	#f9 ff f9	#fc ff f9	#fffff9	#ff fc f9	#fffbf9	#fd fdfb

渋い色系

#d9e6df	#d9e6d9	#dfe6d9	#e6 e6d9	#e6e2d9	#e6dfd9	#e6 dcd9	#e6 dbd9
#e8d7d7	#e6d9df	#e6d9e6	#dfd9e6	#dbd9e6	#d9db e6	#d9dfe6	#d9e6 e6
#add1 d1	#add1 c9	#add1 bf	#add1b7	#b7d1ad	#d1 d1ad	#d1 bfad	#d1b7ad
#d1 adae	#d1 adbf	#d1add1	#bfadd1	#b7add1	#adadd1	#adb7d1	#adb fd1
#7a4546	#7a4560	#7a456d	#7a457a	#60457a	#45457a	#45607a	#457a7a
#457a6d	#457a53	#537a45	#7a7a45	#7a6d45	#7a6045	#7a5345	#7a4b45

グレースケール

#fc fc fc	#f9 f9 f9	#f6f6f6	#f4f4f4	#efe fef	#e9e9e9	#e4e4e4	#dfd fdf
#d9d9d9	#d4d 4d4	#c9 c9 c9	#bf bf bf	#b4b4b4	#aaa aaa	#9f9 f9f	#949494
#7f7f7f	#747474	#6a6a6a	#555 555	#3f3 f3f	#2a2a2a	#151515	#0a0a0a

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

#000000	#000033	#000066	#000099	#0000cc	#0000ff
#003300	#003333	#003366	#003399	#0033cc	#0033ff
#006600	#006633	#006666	#006699	#0066cc	#0066ff
#009900	#009933	#009966	#009 999	#0099cc	#0099ff
#00cc00	#00cc33	#00cc66	#00cc99	#00cccc	#00cc ff
#00ff00	#00f f33	#00f f66	#00f f99	#00f fcc	#00f fff
#330000	#330033	#330066	#330099	#3300cc	#3300ff
#333 300	#333 333	#333366	#333399	#3333cc	#3333ff
#336600	#336633	#336 666	#336699	#3366cc	#3366ff
#339900	#339933	#339966	#339 999	#3399cc	#3399ff
#33cc00	#33cc33	#33cc66	#33cc99	#33cccc	#33cc ff
#33ff00	#33ff33	#33ff66	#33ff99	#33ffcc	#33ff ff
#660000	#660033	#660066	#660099	#6600cc	#6600ff
#663300	#663333	#663366	#663399	#6633cc	#6633ff
#666600	#666633	#666 666	#666699	#6666cc	#6666ff
#669900	#669933	#669966	#669999	#6699cc	#6699ff
#66cc00	#66cc33	#66cc66	#66cc99	#66cccc	#66cc ff
#66ff00	#66ff33	#66ff66	#66ff99	#66ffcc	#66ff ff
#990000	#990033	#990066	#990099	#9900cc	#9900ff
#993300	#993333	#993366	#993399	#9933cc	#9933ff
#996600	#996633	#996666	#996699	#9966cc	#9966ff
#999900	#999933	#999966	#999999	#9999 cc	#9999 ff
#99cc00	#99cc33	#99cc66	#99cc99	#99cccc	#99cc ff
#99ff00	#99ff33	#99ff66	#99ff99	#99ffcc	#99ff ff
#cc0000	#cc0033	#cc0066	#cc 0099	#cc00cc	#cc 00ff
#cc 3300	#cc 3333	#cc 3366	#cc 3399	#cc33cc	#cc33ff
#cc6600	#cc6633	#cc 6666	#cc6699	#cc66cc	#cc66ff
#cc9900	#cc9933	#cc9966	#cc 9999	#cc99cc	#cc99ff
#cccc00	#ccc c33	#cccc66	#ccc c99	#ccc ccc	#ccc cff
#cc ff00	#cc ff33	#cc ff66	#cc ff99	#cc ffcc	#cc ff ff
#ff0000	#ff0033	#ff0066	#ff 0099	#ff00cc	#ff 00ff
#ff3 300	#ff3 333	#ff3366	#ff3399	#ff33cc	#ff33ff
#ff6600	#ff6633	#ff6 666	#ff6699	#ff66cc	#ff66ff
#ff9900	#ff9933	#ff9966	#ff9999	#ff99 cc	#ff99 ff
#ffcc00	#ffcc33	#ffcc66	#ffcc99	#ffcc cc	#ffcc ff
#ff ff00	#ff ff33	#ff ff66	#ff ff99	#ff ffcc	#ffffff

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

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

カラーネーム（CSS3で定義されている色一覧^[1]）

#F0F8FF(alice blue)	#FA EBD7(ant ique white)	#00F FFF(aqua, cyan)
#7FF FD4(aqua marine)	#F0FF FF(azure)	#F5 F5 DC(beige)	#FFE4C4(bisque)
#000000(black)	#FF EBCD(blanchedalmond)	#0000FF(blue)	#8A2BE2(blue vi olet)
#A52A2A(brown)	#DEB887(burlywood)	#5F9EA0(cadet blue)	#7FFF00(chartreuse)
#D2691E(chocolate)	#FF7 F50(coral)	#6495ED(cor nflowerb lue)	#FFF8DC(cor nslik)
#DC 143C(crimson)	#00008B(da rkb lue)	#008B8B(da rkcyan)	#B8860B(darkgolden rod)
#A9A9A9(darkgray, darkgrey)		#006400(darkgreen)	#BDB76B(da rkkhaki)
#8B008B(darkmagenta)	#556B2F(darko live green)	#FF8C00(darkorange)	#9932CC(darkorchid)
#8B0000(darkred)	#E9967A(da rksalmon)	#8FBC8F(da rkseagreen)	#483D8B(da rks lat eb lue)
#2F4F4F(da rks lategray, da rks lategrey)		#00CE D1(darkt urquo ise)	#9400D3(darkv iolet)
#FF1493(deep pink)	#00BF FF(deep sky blue)	#696969(dimgray, dimgrey)
#1E90FF(dodge rb lue)	#B22222(fire brick)	#FF FAF0(floralwhite)	#228B22(forest green)
#FF 00FF(fuchs ia, magenta)		#DCD CDC(gai nsboro)	#F8F8FF(ghos tw hite)
#FFD700(gold)	#DAA520(golden rod)	#808080(gray, grey)
#008000(green)	#adf f2f(green yellow)	#F0FFF0(honeydew)	#FF69B4(hotpink)
#CD5C5C(indian red)	#4B0082(indigo)	#FFFFF0(ivory)	#F0E68C(kh aki)
#E6 E6 FA(lav ender)	#FFF0F5(lav ender blush)	#7CFC00(law ngreen)	#FF FA CD(lemonchiffon)
#ADD8E6(light blue)	#F08080(light coral)	#E0 FF FF(light cyan)	#FA FA D2(light golden rod yellow)
#D3 D3 D3(light gray, light grey)		#90EE90(light green)	#FFB6C1(light pink)
#FFA07A(lightsalmon)	#20B2AA(lightseagreen)	#778899(lights lategray, lights lategrey)
#87CE FA(lights kyb lue)	#B0C4DE(lights teelblue)	#FF FF E0(light yellow)	#00FF00(lime)
#32CD32(lime green)	#FAF0E6(linen)	#800000(maroon)	#66cd aa(mediumaqua marine)
#0000CD(mediumb lue)	#BA55D3(mediumorchid)	#9370DB(mediump urple)	#3CB371(mediumse agreen)
#7B68EE(mediums lat eb lue)	#00FA9A(mediumsp rin ggreen)	#48D1 CC(mediumturquo ise)	#C71585(mediumv ioletred)
#191970(midnight blue)	#F5 FF FA(mint cream)	#FFE4E1(mistyrose)	#FFE4B5(moc casin)
#FFDEAD(navajowhite)	#000080(navy)	#FD F5 E6(oldlace)	#808000(olive)
#6B8E23(olive drab)	#FFA500(orange)	#FF4 500(orange red)	#DA70D6(orchid)
#EEE8 AA(pal ego ldenrod)	#98FB98(palegreen)	#AFEEEE(paleturquo ise)	#DB7093(pal ev ioletred)
#FFEFD5(papayaw hip)	#FF DAB9(peach pu ff)	#CD853F(peru)	#FFC0CB(pink)
#DDA0DD(plum)	#B0E0 E6(powderb lue)	#800080(purple)	#FF0000(red)
#BC8F8F(rosybrown)	#4169E1(royal blue)	#8B4513(saddle brown)	#FA8072(salmon)
#F4A460(sandybrown)	#2E8 B57(seagreen)	#FF F5EE(sea shell)	#A0522D(sie nna)
#C0C0C0(silver)	#87CE EB(sky blue)	#708090(sl ategray, sl ategrey)
#6A5A CD(sl at eb lue)	#FF FA FA(snow)	#00FF7F(spring green)	#4682B4(steelblue)
#D2B48C(tan)	#008080(teal)	#D8BFD8(thistle)	#FF6 347(tomato)
#40E0D0(turquo ise)	#EE82EE(vi olet)	#F5DEB3(wheat)	#FFFFFF(white)
#F5 F5 F5(white smoke)	#FF FF00(yellow)	#9AC D32(yellow green)	以上、合計138色

また、現在草案となっているCSS4 Color Moduleでは#663399(rebecca purple) という色が追加されている。RebeccaとはCSSの規格策定に尽力したEric Meyer氏の娘であり、彼女が難病のため6歳の若さにして亡くなったことを知った有志の提案により追加された（解説）。

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

編集者向けページ
マニュアル	記事の編集方法 - HTMLタグ一覧 - HTMLエディタヘルプ - スマホエディタヘルプ - ピコカキコヘルプ - お絵カキコヘルプ - パンくずリスト - パンくずリストのガイドライン
マナー	編集時のマナー - 編集合戦 - 編集競合 - 楽しく過ごすために
素材	素材集 - 素材集2 - ニコニコテレビ君 - キャラアイコン - ドットキャラ - 外字・特殊フォント
テンプレ	お知らせ表示 - ユーザーボックス - テンプレートボックス - 作品テンプレート - HTMLテンプレート集 - Twitter引用
カラー	HTMLカラーコード - CSSでの色指定
仕様	仕様 - デフォルトCSS - 自動リンク - ページ番号 - リビジョン番号 - 初版作成日 - 最終更新日 - 編集履歴
依頼	一般会員依頼スレ - 記事作成依頼 - 記事加筆依頼 - 要編集記事 - 未作成タグ - 話題の単語
公式企画	百チャレ - 大百科グランプリ
ヘルプ	よくある質問 - エラー・不具合情報
編集者	編集者一覧 - ★ - ∞ - ♢
その他	今週のオススメ記事 - おすすめトレンド - 急上昇ワード改
ver20 231215