HTML Background Color - HTML Color Codes

Trang chủ » Html Cool Background Colors » HTML Background Color - HTML Color Codes

Có thể bạn quan tâm

HTML Tutorial

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>
Demo on CodePen

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>
Demo on CodePen

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>
Demo on CodePen

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>
Demo on CodePen

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>
Demo on CodePen

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>
Demo on CodePen

Từ khóa » Html Cool Background Colors