今注目のニュース
マックコーヒー「0円」再び! しかもさらに濃く、美味しくなったよ。
さっしーどハマリ中! 「ずっと食べちゃう。終わりを知らない」ウマ過ぎおやつ。
狂戦士ベルセルクを獰猛にした薬物はナス科の植物である可能性が浮上(スロベニア研究)

HTMLカラーコード単語

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

掲示板をみる(22)
  • twitter
  • facebook
  • はてな
  • LINE

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進数の色表記の変換については外部サイトexitを参照。

ニコニコ動画では、プレミアム会員のみ 動画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 Moduleexit)
#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と同じ)であることに注意。コメントの色について細かいことはコメントの項を参照のこと。

関連項目

掲示板

  • 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

    まぁ綺麗

急上昇ワード

最終更新:2019/10/15(火) 06:00

ほめられた記事

最終更新:2019/10/15(火) 06:00

☆オススメの関連コンテンツ

動画

この記事名で動画を検索

静画(イラスト)

この記事名で静画を検索

ニュース

この記事名でニュースを検索

ウォッチリストに追加しました!

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

           

ほめた!

すでにほめています。

すでにほめています。

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

タグ編集にはログインが必要です。

タグ編集には利用規約の同意が必要です。

TOP