HTML Background Color
Today's websites are more dynamic and vibrant than ever. With this brief tutorial, you can also learn how to liven up your site with HTML background color techniques, using HEX codes, HTML color names, and RGB/HSL values.
Background color using HEX color codes
Applying a background color to a webpage is surprisingly easy. The first and most common method is using a HEX color code with the background-color property. In this example, we apply a HEX color directly to the HTML <body> element with the style attribute.
This same approach can style almost any HTML element, but remember that its behavior might change if it's an inline or block-level element. You can use our color picker or color charts to find a suitable HEX code.
HTML
<body style="background-color:#FF0000;">
</body>Background color using HTML color names
While HEX codes may be the most widespread, they are just one of many options available for coloring an HTML element. A second method is to use an HTML color name; just substitute the HEX code with one of the 140 supported color names, and you are ready to go.
Here is a convenient list of all 140 HTML color names with their corresponding HEX and RGB values for your reference.
HTML
<body style="background-color:red;">
</body>Background color using RGB color values
RGB values can also be used to apply a background color to HTML elements. With the same style attribute as before, replace the HEX code or color name with a correctly formatted RGB value (remember to enclose it in parentheses and prefix it with 'rgb').
When using RGB values in HTML, you have the added option of defining the opacity level. With the prefix rgba()—where the 'a' represents alpha, the channel controlling transparency—you can add a fourth value between 0 and 1, with 0 being fully transparent and 1 completely opaque (use decimal values for levels in between).
HTML
<body style="background-color:rgb(255,0,0);">
</body>HTML
<body style="background-color:rgba(255,0,0,0.5);">
</body>Background color using HSL color values
Though less common, HSL values are just as effective and are now supported by many modern browsers. If you are new to HSL (Hue, Saturation, and Lightness), head over to Wikipedia for a summary of why it's so useful. If you just want to apply it as an HTML background color, use the same syntax as RGB values but with the hsl() prefix instead.
Like their RGB equivalents, HSL can also be given an alpha channel to manage opacity. Use the hsla() prefix and include a fourth value between 0 and 1.
HTML
<body style="background-color:hsl(0,100%,50%);">
</body>HTML
<body style="background-color:hsla(0,100%,50%,0.5);">
</body>