Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Different ways to apply colors in an HTML document
A website or application with more color is more visually appealing than one with only black and white. We will go over each method of applying color to HTML texts in this article. There is no specific tag for applying colors in HTML document, just like for other HTML tags. On the other hand, you can add color and appeal to a certain element by utilizing the style attribute. You can specify colors on page level using <body> tag or you can set colors for individual tags using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors −
bgcolor − sets a color for the background of the page.
text − sets a color for the body text.
alink − sets a color for active links or selected links.
link − sets a color for linked text.
vlink − sets a color for visited links − that is, for linked text that you have already clicked on.
HTML Color Coding Methods
There are following three different methods to set colors in your web page −
Color names − You can specify color names directly like green, blue or red.
Hex codes − A six-digit code representing the amount of red, green, and blue that makes up the color.
Color decimal or percentage values − This value is specified using the rgb( ) property.
Now we will see these coloring schemes one by one.
HTML Colors - Color Names
You can directly specify a color name to set text or background color. W3C has listed 16 basic color names that will validate with an HTML validator but there are over 200 different color names supported by major browsers. Let’s have a look on the list of W3C Standard 16 Colors names and it is recommended to use them.
Black |
Gray |
Silver |
Teal |
White |
Navy |
Yellow |
Olive |
Lime |
Maroon |
Aqua |
Purple |
Fuchsia |
Blue |
Red |
Green |
Example
Following is the example to set background of an HTML tag by color name −
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text="Fuchsia" bgcolor="silver ">
<h2>Mahendra Singh Dhoni</h2>
<table bgcolor="green">
<tr>
<td>
<font color="white">Mahendra Singh Dhoni is an Indian professional cricketer. He was captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014. Dhoni is widely considered one of the greatest cricket captains, wicket-keeper-batsman and finishers in the history of cricket.</font>
</td>
</tr>
</table>
</body>
</html>
When we run the above code, it will generate an output consisting of the text along with the colors applied and displayed on the webpage.
HTML Colors - Hex Codes
A hexadecimal is a 6-digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB). A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Paintshop Pro or MS Paint.
Each hexadecimal code will be preceded by a pound or hash sign #. Following is a list of few colors using hexadecimal notation.
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
Example
Let’s look at the following example where we are going to set the background of an HTML tag by color code in hexadecimal.
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text="#DE3163" bgcolor="#D5F5E3">
<h2 style="font-family:verdana; text-align:center">TutorialsPoint</h2>
<table bgcolor="#F7F9F9 ">
<tr>
<td>
<font color="#1C2833">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</font>
</td>
</tr>
</table>
</body>
</html>
On running the above code, it will generate an output consisting of the text along with a color applied to it, displayed on the webpage.
HTML Colors - RGB Values
This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage. Let’s look into the few colors using RGB values.
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
All the browsers does not support rgb() property of color so it is recommended not to use it.
Example
Consider the following example, where we are going to set the background of an HTML tag by color code using rgb() values. −
<!DOCTYPE html>
<html>
<head>
<title> HTML | <font> color Attribute </title>
<style>
h2 {
font-family: verdana;
text-align: center;
color: rgb(222, 49, 99)
}
font {
font-family: verdana;
}
</style>
</head>
<body>
<h2>Virat Kohli</h2>
<font size="5" color="rgb(128, 128, 0)"> Virat Kohli is an Indian international cricketer and the former captain of the Indian national cricket team. Widely regarded as one of the greatest batsmen in the history of the sport, he plays for Royal Challengers Bangalore in the IPL and Delhi in domestic cricket. </font>
</body>
</html>
When we run the above code, it will generate an output consisting of the text that is colored using the rgb() property displayed on the webpage.
12 Views
