This article covers how to use colors in the website using HTML in simple and easy way. Colors play an important role in creating websites to look and feel good. There is no individual tag built-in HTML; instead, it makes use of style attribute or the color property. Precisely, the colors are embedded in the HTML elements using Cascading Style Sheet (CSS). Colors give an elegant look to the web page. Adding colors to the web page includes setting background colors, tables, paragraphs, etc.
Making background color brighten makes the website to look pretty and bolder. It is done by using colors, Hex color codes. RGB and RGBA color values (Alpha value 0 to 1).
Hex color is applied directly to the Html code using the Style attribute inside the body element of the Html. Hex is a combination of both numbers and letters. Below is the example illustrating Background color on the web page.
Code:
<!DOCTYPE html> <title>My Sample</title> <html> <head> <title>HTML BG Color</title> </head> <body style="background-color:red;"> <h1> This page is a demo </h1> </body> </html>
Code Snippets:
To add background color, you can use the bgcolor attribute to display < body bgcolor=’ ‘>. It is compatible with all browsers except in HTML 5.
Code:
<h3 style="color: blue">Color Name</h3> <h3 style="color: #0000ff">Hexadecimal</h3> <h3 style="color: rgb (0,0,255)">RGB Value</h3>
Applying color to the HTML text is quite easy; we can add/ change the color of the text by applying three ways, namely Hex color, HSL values and color names. The following are the three different techniques to apply color to the corresponding web pages.
This is quite simple by using English color names when the application is straight forward these color names are used. Specifying color names are direct methods, and W3C has announced 16 basic colors (Black, yellow, red, Maroon, Grey, Lime, Green, Olive, Silver, Aqua, Blue, Navy, White, Purple, Fuchsia, Teal)
Hue saturation and lightness color values. Hue is defined in 0 to 360-degree, saturation and lightness from 0 to 100 %.
To get a precise result six-digit hexadecimal number is applied. To elaborate, the first two digits denote Red, the next two denote Green, the other two denote Blue value and preceded by ‘#’.
The following example explains the different ways of applying colors to the documents.
Code:
<head>
<title>EDUCBA</title>
<style type="text/css">
h1{
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
}
h4{
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
}
li{
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h4>List of operating System</h4>
<ul>
<li> Windows</li>
<li>MACINTOSH</li>
<li>LINUX</li>
<li>UBUNTU</li>
</ul>
</body>
</html>Output:
There are different methods to do text color as HTML has a lot of customizable applications.