Html Page Background Color

Html Page 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.

HTML Page background color

Can be done 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.

<body style="background-color:#FF0000;">
</body>

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.

<body style="background-color:red;">
</body>

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’).

<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).

<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. HSL – which stands for Hue, Saturation and Lightness. 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.

<body style="background-color:hsl(0,100%,50%);">
</body>
  • In HTML, We can set Background Color to the Browser Screen. It will give attractive display to the browser.
  • The bgcolor attribute sets the background color to the screen.
  • The Background Color must be give within the <bg> tag.
  • The bgcolor and background attributes should be given in the <body> tag.

Screenshots:

Html Page Background Color Code :

Html Page Background Color
Html Page Background Color Code


Html Page Background Color Output :

Html Page Background Color
Html Page Background Color Output