CSS の background-color プロパティは、HTML 文書で背景の色を指定するときに使われる。
background-color : transparentbackground-color : inheritbackground-color : namebackground-color : #rrggbbbackground-color : rgb(red, green, blue)background-color : rgba(red, green, blue, alpha)background-color : hsl(hue, saturation, lightness)background-color : hsla(hue, saturation, lightness, alpha)以下に示すいずれかの書式で背景色を指定できる。
| 名前 | カラーコード | サンプル |
|---|---|---|
| black | #000000 |
|
| gray, grey | #808080 |
|
| silver | #c0c0c0 |
|
| white | #ffffff |
|
| maroon | #800000 |
|
| red | #ff0000 |
|
| purple | #800080 |
|
| fuchsia, magenta | #ff00ff |
|
| green | #008000 |
|
| lime | #00ff00 |
|
| olive | #808000 |
|
| yellow | #ffff00 |
|
| navy | #000080 |
|
| blue | #0000ff |
|
| teal | #008080 |
|
| aqua, cyan | #00ffff |
|
| orange | #ffa500 |
|
| aliceblue | #f0f8ff |
|
| antiquewhite | #faebd7 |
|
| aquamarine | #7fffd4 |
|
| azure | #f0ffff |
|
| beige | #f5f5dc |
|
| bisque | #ffe4c4 |
|
| blanchedalmond | #ffebcd |
|
| blueviolet | #8a2be2 |
|
| brown | #a52a2a |
|
| burlywood | #deb887 |
|
| cadetblue | #5f9ea0 |
|
| chartreuse | #7fff00 |
|
| chocolate | #d2691e |
|
| coral | #ff7f50 |
|
| cornflowerblue | #6495ed |
|
| cornsilk | #fff8dc |
|
| crimson | #dc143c |
|
| darkblue | #00008b |
|
| darkcyan | #008b8b |
|
| darkgoldenrod | #b8860b |
|
| darkgray, darkgrey | #a9a9a9 |
|
| darkgreen | #006400 |
|
| darkkhaki | #bdb76b |
|
| darkmagenta | #8b008b |
|
| darkolivegreen | #556b2f |
|
| darkorange | #ff8c00 |
|
| darkorchid | #9932cc |
|
| darkred | #8b0000 |
|
| darksalmon | #e9967a |
|
| darkseagreen | #8fbc8f |
|
| darkslateblue | #483d8b |
|
| darkslategray, darkslategrey | #2f4f4f |
|
| darkturquoise | #00ced1 |
|
| darkviolet | #9400d3 |
|
| deeppink | #ff1493 |
|
| deepskyblue | #00bfff |
|
| dimgray / dimgrey | #696969 |
|
| dodgerblue | #1e90ff |
|
| firebrickfirebrick | #b22222 |
|
| floralwhite | #fffaf0 |
|
| forestgreen | #228b22 |
|
| gainsboro | #dcdcdc |
|
| ghostwhite | #f8f8ff |
|
| gold | #ffd700 |
|
| goldenrod | #daa520 |
|
| greenyellow | #adff2f |
|
| honeydew | #f0fff0 |
|
| hotpink | #ff69b4 |
|
| indianred | #cd5c5c |
|
| indigo | #4b0082 |
|
| ivory | #fffff0 |
|
| khaki | #f0e68c |
|
| lavender | #e6e6fa |
|
| lavenderblush | #fff0f5 |
|
| lawngreen | #7cfc00 |
|
| lemonchiffon | #fffacd |
|
| lightblue | #add8e6 |
|
| lightcoral | #f08080 |
|
| lightcyan | #e0ffff |
|
| lightgoldenrodyellow | #fafad2 |
|
| lightgray, lightgrey | #d3d3d3 |
|
| lightgreen | #90ee90 |
|
| lightpink | #ffb6c1 |
|
| lightsalmon | #ffa07a |
|
| lightseagreen | #20b2aa |
|
| lightskyblue | #87cefa |
|
| lightslategray, lightslategrey | #778899 |
|
| lightsteelblue |
#b0c4de
|
|
| lightyellow |
#ffffe0
|
|
| limegreen |
#32cd32
|
|
| linen |
#faf0e6
|
|
| mediumaquamarine |
#66cdaa
|
|
| mediumblue |
#0000cd
|
|
| mediumorchid |
#ba55d3
|
|
| mediumpurple |
#9370db
|
|
| mediumseagreen |
#3cb371
|
|
| mediumslateblue |
#7b68ee
|
|
| mediumspringgreen |
#00fa9a
|
|
| mediumturquoise |
#48d1cc
|
|
| mediumvioletred |
#c71585
|
|
| midnightblue |
#191970
|
|
| mintcream |
#f5fffa
|
|
| mistyrose |
#ffe4e1
|
|
| moccasin |
#ffe4b5
|
|
| navajowhite |
#ffdead
|
|
| oldlace |
#fdf5e6
|
|
| olivedrab |
#6b8e23
|
|
| orangered |
#ff4500
|
|
| orchid |
#da70d6
|
|
| palegoldenrod |
#eee8aa
|
|
| palegreen |
#98fb98
|
|
| paleturquoise |
#afeeee
|
|
| palevioletred |
#db7093
|
|
| papayawhip |
#ffefd5
|
|
| peachpuff |
#ffdab9
|
|
| peru |
#cd853f
|
|
| pink |
#ffc0cb
|
|
| plum |
#dda0dd
|
|
| powderblue |
#b0e0e6
|
|
| rosybrown |
#bc8f8f
|
|
| royalblue |
#4169e1
|
|
| saddlebrown |
#8b4513
|
|
| salmon |
#fa8072
|
|
| sandybrown |
#f4a460
|
|
| seagreen |
#2e8b57
|
|
| seashell |
#fff5ee
|
|
| sienna |
#a0522d
|
|
| skyblue |
#87ceeb
|
|
| slateblue |
#6a5acd
|
|
| slategray, slategrey | #708090 |
|
| snow |
#fffafa
|
|
| springgreen |
#00ff7f
|
|
| steelblue |
#4682b4
|
|
| tan |
#d2b48c
|
|
| thistle |
#d8bfd8
|
|
| tomato |
#ff6347
|
|
| turquoise |
#40e0d0
|
|
| violet |
#ee82ee
|
|
| wheat |
#f5deb3
|
|
| whitesmoke |
#f5f5f5
|
|
| yellowgreen | #9acd32 |
|
| rebeccapurple | #663399 |
要素の背景色を名前で指定する例を次に示す。
<p style="background-color: turquoise">The quick brown fox jumps over the lazy dog.<p>The quick brown fox jumps over the lazy dog.
要素の背景色を名前で指定する例を次に示す。
<p style="background-color: #40e0d0">The quick brown fox jumps over the lazy dog.<p>The quick brown fox jumps over the lazy dog.
hsl(hue, saturation, lightness)hsla(hue, saturation, lightness, alpha)transparent
スマホやWindowsではOSの設定でダークモードにすることができる。OSのダークモードが設定されているときに背景色を変えるには、次のようにする。
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white
}
}JavaScriptからは element.style オブジェクトの backgroundColor プロパティでCSSの background-color プロパティを参照又は設定できる。
document.getElementById("#id").style.backgroundColor = 'white'JavaScriptで背景の色を切り替えるサンプルを次に示す。
<label for="color">background-color:</label>
<select id="color" onchange="changeColor()">
<option>white</option>
<option>silver</option>
<option>aliceblue</option>
<option>azure</option>
<option>honeydew</option>
<option>ivory</option>
</select>
<script>
function changeColor() {
let c = document.getElementById('color')
let i = c.selectedIndex
document.getElementById("body").style.backgroundColor = c.options[i].text
}
</script>背景色を選択すると、このページの背景画像が切り替わる。
World Wide Web Consortium (2025) CSS Backgrounds and Borders Module Level 3