単語記事: HTMLカラーコード

編集

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

概要

#ff0000」のように、#シャープ)の後の16進数(0~9+A~F)6桁の英数字で色を表したもの。左から2桁ずつ、RRed)・GGreen)・BBlue)の数値を示し、それらを加法混色したときの色を表す。各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通りがある。例として赤色  定方法を挙げる。

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

なお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という表記も存在し、これは透明度(アルファチャンネル)を扱うことができる。CSSopacityとの違いは、背景色に定した場合に継承されることがなく、かつ背景文字で異なる透明度を定可なので、背景色だけを透明にすることも可である。ただし、大百科では使えないらしいので注意。

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(要するにWeblimeと同じ)であることに注意。コメントの色について細かいことはコメントの項を参照のこと。

関連項目


【スポンサーリンク】

携帯版URL:
http://dic.nicomoba.jp/k/a/html%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89
ページ番号: 4188991 リビジョン番号: 2151511
読み:エイチティーエムエルカラーコード
初版作成日: 09/10/24 13:21 ◆ 最終更新日: 15/01/26 13:00
編集内容についての説明/コメント: 関連項目にカラフルコメントを追加
記事編集 / 編集履歴を閲覧
このエントリーをはてなブックマークに追加

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

HTMLカラーコードについて語るスレ

13 : ななしのよっしん :2011/06/01(水) 20:05:45 ID: 4n4ck42PPM
とても助かりました!!
ありがとうございます!!!
14 : ななしのよっしん :2012/01/21(土) 21:13:40 ID: 93ykq3Hmo5
コマンド一覧に見当たらない色のコメントが気になっていたんだが、あれってプレミアム専用だったのね。
15 : ななしのよっしん :2012/03/01(木) 11:51:39 ID: IGK5fdS7nE
オレンジがないな・・・
16 : ななしのよっしん :2012/03/02(金) 01:23:18 ID: 4+CxXecOfJ
下の注意書きについてだけど、「Webにおいて」ではなくてあくまで「Webカラーネームにおいて」
カラーネームっていう単を入れておかないと誤解を招くと思う。
例えば冒頭の三原色の説明では#00ff00をgreenとして扱ってるわけだから#00FF00の色をしてgreenと呼ぶことは何ら間違っているわけじゃない。
あとwebカラーネームでもcyanに該当するのは#00ffffだよ。
17 : ななしのよっしん :2012/03/02(金) 06:03:58 ID: qr3qqi2Liq
>>16
それが、いくつかのサイトだとaquaなんでねー(aqua#00ffff)。
つかCSS仕様書ではaquaと呼ばれてる。拠もある。
http://www.w3.org/TR/css3-color/#html4
つか追加定義されてる色について執筆したほうがよさそうな気がしてきた。こっちにcyanは定義されていて#00ffffだわ(要するに16色側じゃなく拡側にある)。
要するに、cyanaquaはまったく同じ色で、基本16色ではaquaと定義されてるわけである。cyanは拡セットに入っているaquaの別名。
まあ書き直すが。
18 : ななしのよっしん :2012/03/03(土) 12:10:21 ID: IGK5fdS7nE
ごく一部の人がやっているけど、6字ではなく、3字で現してる人もいる
19 : ななしのよっしん :2012/03/20(火) 09:56:36 ID: 4+CxXecOfJ
>>17
遅くなったけど編集でした!色見本が充実していい感じですね。
自分としては色の名前なんて場合によってす範囲が変わったりするような曖昧なものだから、何が間違いということはない。っていうことが伝わればいいと思ってたので、今の書き方で良いと思います。
20 : ななしのよっしん :2012/12/06(木) 22:09:40 ID: 8DPMFwfwij
凄いカラフルな記事だな

気になったんだけど、「グレイスケール」じゃなくて「グレーケール」の方が一般的じゃない?
21 : ななしのよっしん :2013/04/05(金) 14:02:42 ID: EQWSSu1bfl
概要の最初にあるカラーバー8bit CPU時代の8色を思い起こさせる・・・
22 : ななしのよっしん :2013/06/08(土) 17:19:24 ID: 7UvVUtvB8D
まぁ綺麗
ニコニコニューストピックス
  JASRAC許諾番号: 9013388001Y45123
  NexTone許諾番号: ID000001829