Avatar of Chris Coyier
Chris Coyier on (Updated on )

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.


Browser support

iOS SafariChrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
Source: caniuse

More information