Different ways to apply colors in an HTML document
Last Updated :
02 Jun, 2023
A colorful website or application is more attractive rather than a black-and-white website. In this article, we will go through all the different ways to apply colors in HTML documents. Like other HTML tags, there is no special tag to apply colors in HTML documents. However, using the style attribute, you can make a particular element colorful and appealing. We will also discuss color coding methods that will help you to apply the same color using different methods.
There are two main properties in style attribute to set the color of text and background of the block.
- Color: It is used to set the color of the body text.
- Background Color: It is used to set the background color of the web page, particular block, or element.
Example 1: We can use text attribute to set the color of text and bg-color to set the background color.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Set the text color</title>
</head>
<body>
<h1 style="color:green">
hello! Welcome to GFG
</h1>
<h2 style="color:Red">
hello! Welcome to GFG
</h2>
<h3 style="background-color:Blue">
hello! Welcome to GFG </h3>
<h3 style="background-color:Blue; color:red">
hello! Welcome to GFG </h3>
</body>
</html>
|
Output:
Moreover, to set color for the linked text, the style attribute has 3 different properties.
- alink: It is used to set colors for active links.
- vlink: It is used to set colors for visited links.
- link: It is used to set colors for the linked text.
Different color coding methods in HTML: There are mainly three different color coding methods available in HTML language. Hexadecimal and RGB notation are the most popular methods. However, some developers are also using the color name notation and HSL notation.
HTML Colors:
Example 2: We use the color name to set the color of text, link, or background. On the internet, You will find more than 200 colors with their name. We have a list of W3C standard 16 colors.
HTML
<!DOCTYPE html>
<html>
<body>
<h1> Welcome to GFG </h1>
<table>
<tr>
<td>
<p style="color:black"> Black </p>
</td>
<td>
<p style="color:yellow"> Yellow </p>
</td>
<td>
<p style="color:red"> Red </p>
</td>
<td>
<p style="color:blue"> Blue</p>
</td>
</tr>
<tr>
<td>
<p style="color:maroon"> Maroon </p>
</td>
<td>
<p style="color:gray"> Gray </p>
</td>
<td>
<p style="color:Lime"> Lime </p>
</td>
<td>
<p style="color:green"> Green </p>
</td>
</tr>
<tr>
<td>
<p style="color:olive"> Olive </p>
</td>
<td>
<p style="color:silver"> Silver </p>
</td>
<td>
<p style="color:Aqua"> Aqua </p>
</td>
<td>
<p style="color:navy"> Navy </p>
</td>
</tr>
<tr>
<td>
<p style="color:white"> White </p>
</td>
<td>
<p style="color:teal"> Teal </p>
</td>
<td>
<p style="color:purple"> Purple </p>
</td>
<td>
<p style="color:fuchsia"> Fuchsia </p>
</td>
</tr>
</table>
</body>
</html>
|
Output:
HTML colors Hexadecimal notation: Instead of writing color names, we will write the hexadecimal codes to set the particular color. There is a unique hexadecimal code available for every color. Hexadecimal code is a string of 6 characters followed by the # sign. It includes values from 0 to 9 and A to Z.
<h1 style="color:#00000"> hello Geeks </h1>
HTML colors RGB notation: RGB stands for Red, Green, and Blue. It takes three integer values between 0 to 255 for each one of the three colors. By changing the values of the three inputs, you can produce the new colors which you need.
<h1 style="color:rgb(70,130,180)"> Hello Geeks </h1>
HTML colors HSL notation: HSL notation is rarely used by HTML developers. HSL is referred to as Hue, Saturation, and Lightness. For the hue, we have to set a value in degree between 0 to 360. For saturation and lightness, we have to set values in percentages between 0% to 100%.
<h1 style = "color : hsl(127, 57%, 47%)"> Hello Geeks </h1>
Different ways to apply color: The most preferable method to set color inside the HTML document is using the stylesheet. If needed, we can use inline CSS or internal CSS. We will see each method one by one.
Inline CSS: As the name suggests, we have to add a style attribute inside any HTML tag. Inside the style attribute, we can add color properties and their value.
<h1 style="color:green"> Welcome to GFG </h1>
Internal CSS: We have to add color properties inside the HTML file but not inside the HTML tag.
HTML code: The following code has internal CSS code.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: Green;
}
</style>
</head>
<body>
<p> hello Geeks </p>
</body>
</html>
|
External CSS: This method is the same as the internal CSS method but we have to add CSS in the external file.
HTML code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css" href="color.css">
</head>
<body>
<p> hello Geeks </p>
</body>
</html>
|
CSS
Conclusion: Users can create a colorful application using the different color coding methods. We recommended using the color name and hexadecimal notation because some browser does not support RGB and HSL notation. To pick a hexadecimal code or RGB value, you can use a color picker that you find on the internet.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...