HTML Background Color
Websites today are bolder and brighter than ever, and with this quick tutorial you too can learn how to brighten up your website with some HTML background color magic, using Hex color codes, HTML color names, RGB and HSL values.
Background color using Hex color codes
Coloring a webpage background is actually pretty simple. The first and most popular way is by using a Hex color code with the background-color property. Here we apply a Hex color directly on the HTML <body> element using the style attribute.
HTML
<body style="background-color:#FF0000;"> </body>
This same method can be used to style just about any HTML element, but keep in mind their behavior may differ depending on whether they are inline or block level elements. Use our color picker or color charts to find a Hex color code.
Background color using HTML color names
HEX color codes may be the most popular, but they are just one of many methods available to color an HTML element. A second way is to use an HTML color name; simply replace the HEX code with one of the 140 supported color names and you're good to go.
HTML
<body style="background-color:red;"> </body>
Here is a helpful list of all 140 HTML color names with their corresponding HEX and RGB values for reference.
Background color using RGB color values
RGB values can also be used to add a background color to HTML elements. Using the same style attribute like before, replace the HEX code or color name with a properly formatted RGB value (be sure to enclose it in parentheses and prefix it with a lowercase 'rgb').
HTML
<body style="background-color:rgb(255,0,0);"> </body>
When using RGB values in HTML you have the additional option of specifying the level of opacity. With the prefix rgba() – the 'a' stands for alpha, the channel that controls transparency – you can insert a fourth value between 0 and 1, 0 for fully transparent and 1 for totally opaque (use decimal values for levels in between).
HTML
<body style="background-color:rgba(255,0,0,0.5);"> </body>
Background color using HSL color values
Less popular but equally as powerful, HSL values are now supported by many modern browsers. If you're unfamiliar with HSL (which stands for Hue, Saturation and Lightness) head on over to Wikipedia for a rundown of why they're so awesome. If you just want to use them for an HTML background color, follow the same syntax as the RGB values above, but using instead the hsl() prefix.
HTML
<body style="background-color:hsl(0,100%,50%);"> </body>
Like their RGB brethren, HSL can also be passed an alpha channel to control the opacity. Use the hsla() prefix and insert a fourth value between 0 and 1.
HTML
<body style="background-color:hsla(0,100%,50%,0.5);"> </body>