background-color

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

The background-color property in CSS applies solid colors as background on an element. Here’s an example:

html {
  background-color: #82a43a; 
}

The example used above (#82a43a) is called a hex code, and it is one of several ways that CSS has to represent a single color. There are a number of ways to find the right hex codes. Anyone who has used a design tool has seen a color picker similar to this one:

Note the hex code in the lower middle.

Hex codes are one way to declare a color in CSS. There are also a whole bunch of names that you can use, for example:

.page-wrap { background: white; }
footer { background: black; }
.almonds { background: blanchedAlmond; }

These colors aren’t very flexible, but they can come in handy in a pinch. They’re easier to remember than hex codes, and there are a ton of them.

Another way to declare a color is to use RGB, RGBa, HSL, or HSLa:

#page-wrap {
  background: rgba(0, 0, 0, 0.8); /* 80% Black */
}
.widget {
  background: hsla(170, 50%, 45%, 1);
}

Unlike hex codes, these values allow for transparency (alpha), which can be super useful. Learn more about RGBa or HSLa.

Demo

Browser support

IEEdgeChromeFirefoxSafariOpera
AllAllAllAllAllAll
iOS SafariChrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
AllAllAll90+62+
Source: caniuse

More information

Related properties