background-color

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

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

Related

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

Comments

  1. User Avatar
    Gilead
    Permalink to comment#

    Is there no way to shorten the length of the background color? When making a website, I like using the CSS background color property. However, when using short 3-4 letter words, the background color is the length of the whole page. I sometimes just want to have a small block of color! Please help! Thank you.

  2. User Avatar
    Amrit
    Permalink to comment#

    In rgba() format, is it possible to specify just the alpha value alone? I need to over-write the alpha value alone on hover.

    • User Avatar
      Tyler
      Permalink to comment#

      You can overwrite the alpha value on :hover by writing out the CSS property again with the same color and new alpha value.

      div{
          background-color: rgba(0,0,0,1);
      }
      div:hover{
          background-color: rgba(0,0,0,0.7);
      }
      
  3. User Avatar
    Gopal sharma
    Permalink to comment#

    Hello,

    What is the best value define for “Alfa” in rgba(). Because I always use this Alfa coordinate as decimal(0.1 – 0.9), as transparency declare in rgba(). I know it also have value from “1-255”. But if we want to define a color as simple rgb() is always equal to rgba() if we declare “Alfa” from “1-255”, Please tell me .

  4. User Avatar
    Amen Machewu
    Permalink to comment#

    I like using hex, how can i put gradient in rgb?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag