Lesson 17 – HTML Colors

Choosing right colors for  your website can give it a vibrant look. In this chapter, we will learn how to specify colors on a webpage using color name, HEX value and RGB Value. 

We can use html <body> tag along with following attributes to specify color for a webpage background, body text, link text etc.

  • html bgcolor attribute is used to specify background color of a webpage. For example <body bgcolor = “brown”>.
  • html text attribute is used to specify the text color. For example <body text=”Green”>.
  • html link attribute is used to specify the link color. For example < body link = “red”>.
  • html alink attribute is used to specify the active link color. For example < body alink = “blue”>.
  • html vlink attribute is used to specify the visited link color. For example < body vlink = “purple”>.

 

HTML Color Specification Methods

We have following three ways to specify  a color name on a webpage.

  • HTML color name:

Here you can directly mention the name of color  you want to set as background in the body tag like purple, yellow or blue etc. There are over 140 color names that are supported by modern browsers. A list of these color name can be downloaded from this link .

html-color-names-1

Example to set background color using html color names.

<!DOCTYPE html>
<html>
<head>
<title>HTML colors by their name</title>
</head>
<body text=”red” bgcolor=”purple”>
</body>
</html>

 

  • HTML Color HEX Value:

We can also specify the color names using 6 digit hexadecimal value RRGGBB preceded by # sign. Here RR represent Red, GG represent Green and BB represent Blue. Below is the list of color name with their hexa value.

html-color-hexa-value1

Example to set background color using hex value

<!DOCTYPE html>
<html>
<head>
<title>HTML colors by their hexa value</title>
</head>
<body text=”#00FFFF” bgcolor=”#00FF00″>
</body>
</html>

 

  • HTML Color RGB Value:

We can also specify color name using RGB (Red, Green, Blue) value. Values can be defined any where between 0 to 255. For example, if RGB values is (255, 0, 0) than it will be display Red color because here we have set red color value to the highest and other values equal to 0. Similarly, RGB value (0, 255, 0) will display Green color. 

html-color-rgb-value

Example to set background color using RGB value.

<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text=”rgb(200,150,130) bgcolor=”rgb(135,16,200)”>
</body>
</html>

 Chapter Summery:

  • Use color name, color HEX value (#00FFFF) or color RGB value (255,134,198) to specify the background color of a webpage.

 

Interview Questions:

  • Can we write multi color text on a webpage?

Yes, we can write multi color text using html <font color = “color name”> tag. You just have to place this tag before every word that you want in different color.

  • How can we change the color of bullet?

Color of bullet is always same as color of text. So if you want to change the bullet color than you have to change the text color first.

  • What are the three ways to specify a color name in html.

(i) Color name

(ii) Color HEX value

(iii) Color RGB value

Practice Exercise:

<!DOCTYPE html>
<html>
<head >
<title>Practice Exercise</title>
</head>
<body>
<h1 > This is a Heading </h1>
<p> This is a Paragraph </p>
</body>
</html>

In above html code,

  • Change the text color to Red using HEX value.
  • Set background color to grey using RGB value.
Click here to practice above exercise in real time HTML code editor

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 80 = 87