HTMLカラーコード単語

3件
エイチティーエムエルカラーコード
7.8千文字の記事
  • 79
  • 0pt
掲示板へ
twitter
記事編集  

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

HTMLカラーコード一覧

代表的なカラーコード

各色グラデーション

薄い色系

渋い色系

#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セーフカラー（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で定義されている色一覧[1]）

#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色

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

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

関連項目


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

脚注

  1. *出典: CSS3 Color Moduleexit

【スポンサーリンク】
  • 79
  • 0pt
  • ページ番号: 4188991
  • リビジョン番号: 3208258
  • 編集内容についての説明/コメント:
    • 編集者向けページテンプレート改訂
記事編集 編集履歴を閲覧

この記事をもとに新規記事を作成

一般単語や、ニコニコの各サービスに関する記事などは、単語記事をご利用ください。
単語記事は、プレミアム会員のみが編集できます。

twitter
facebook
hatena

ニコニ広告で宣伝された記事

ずんだもん (単) 記事と一緒に動画もおすすめ！
提供： とんきん
14396800pt
もっと見る

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

お絵カキコがありません

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

ピコカキコがありません

HTMLカラーコード

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

気になったんだけど、「グレイスケール」じゃなくて「グレースケール」の方が一般的じゃない？
👍
高評価
0
👎
低評価
0
21 ななしのよっしん
2013/04/05(金) 14:02:42 ID: EQWSSu1bfl
レスメニュー
概要の最初にあるカラーバーは8bit CPU時代の8色を思い起こさせる・・・
👍
高評価
0
👎
低評価
0
22 ななしのよっしん
2013/06/08(土) 17:19:24 ID: 7UvVUtvB8D
レスメニュー
まぁ綺麗
👍
高評価
0
👎
低評価
0
23 ななしのよっしん
2022/07/19(火) 14:12:42 ID: u0Ub1SRwXN
レスメニュー
200しかないNG登録数に対してカラーコードは大量にある＆他にもNGにすべきものがあるから、
運営は色つきコメントを表示する・しないの機能をつけてくれんかね
👍
高評価
2
👎
低評価
0
HTMLカラーコードの記事へ戻る
1-

急上昇ワード改

おすすめトレンド

ニコニコニューストピックス

最高に面白かった80年代アニメランキング！3位「ドラゴンボール」、2位「タッチ」、1位は…
『ドラゴンクエスト ダイの大冒険　勇者アバンと獄炎の魔王』は結末までの過程を再度描くことで物語の深みが増す、まさに「理想の前日譚」だ。ダイの師匠である「アバン先生」にフォーカスしたスピンオフ
「どーもくんかと思った」　路上でNHKの“あのキャラ”を思わせる車止めが!?　思わぬ発見に「そのまんまで草w」
「こんなんずるいw」　Amazonで鏡を購入したら……　予想外の映り方に「これは酷い」「声出た」と爆笑
「なんと回転します」　開店祝いの花輪を卓上サイズで再現した装置がすごい　 「歯車フェチにはたまらんやつ」と好評
子どもに高級キーボードのパーツを捨てられた → 公式の“先読みしすぎた対応”が話題「そういうこともあろうかと」
「おしゃれクリップ」ですぐ泣く井桁弘恵に南原清隆「お昼では1回も泣いたことない」
追加ボタンや摩擦防止リングなど、さまざまな機能を搭載したNintendo Switch用コントローラーが販売中。PowerAによる任天堂の公式ライセンス商品で、お洒落に光るコントローラーやJoy-Conとワイヤレスコントローラーを同時に充電できる商品がラインナップ
「こんなに進化してるのは知りませんでした」　最新スマホで動画撮影→強力すぎる“手振れ補正”に驚愕