CSS background-color

スタイルシート属性 background-color は背景の色を指定します。

書式

background-color: color

属性値

color

背景色を指定する。色は color プロパティ同様に指定するか、次の値の中から指定する。

値	説明
transparent	透明色（省略値）
inherit	継承

背景色を名前で指定することもできる。

<body style="background-color: white">

背景色をRGBの16進値で指定することもできる。

<body style="background-color: #ffffff">

背景色をRGB関数で指定することもできる。RGB関数の引数には、Red, Green, Blue の3要素をそれぞれ0から255までの10進数で指定する。

<body style="background-color: rgb(255, 255, 255)>

RGB関数の引数には不透明度を指定することもできる。不透明度は0から1までの範囲で指定する。

<body style="background-color: rgb(0, 0, 0, .5)>

例

スタイルシート属性 background-color の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。

<p>背景の<span style="background-color: silver">色を指定</span>します。</p>

背景の色を指定します。

ダークモード

スマホやWindowsではOSの設定でダークモードにすることができる。OSのダークモードが設定されているときに背景色を変えるには、次のようにする。

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white
  }
}

JavaScript

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>

背景色を選択すると、このページの背景画像が切り替わる。

background-color:

カラーチャート

HTML color
名前	カラーコード	サンプル
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`

aquaとcyanのように、同じ色に複数の名前がついていることがあります。

参考文献

World Wide Web Consortium 2023. CSS Backgrounds and Borders Module Level 3