Avatar of Chris Coyier
Chris Coyier on (Updated on )

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

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.


See the Pen background-color by CSS-Tricks (@css-tricks) on CodePen.


More Resources

Browser Support

Hex codes and most color names work everywhere. RGBa and HSLa have their own sets of browser support: RGBa and HSLa.

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works