DataFlair

HTML Colors and Color Codes

by

Free Web development courses with real-time projects Start Now!!

Using colors in an HTML web-page can make it aesthetic and attractive to the users. We will learn how to use HTML Colors and various HTML color codes.

HTML Colors

HTML Colors

HTML colors can be displayed on a web-page by specifying them in the <body> tag. There are four ways to represent colors within an HTML document – predefined colors, rgb(), hex codes, and hsl(). A large variety of colors can be intermixed to make the webpage more attractive. Choosing the right color scheme for your website can significantly impact user experience and accessibility.

For example,

1. Background-color in HTML

Code:

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body style="background-color: yellow;">
<p>Welcome to DataFlair</p>
</html>

Output:

html color tag

2. Text-color in HTML

Code:

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body style="color: red;">
<p>Welcome to DataFlair</p>
</html>

Output:

Technology is evolving rapidly!
Stay updated with DataFlair on WhatsApp!!

HTML text color

3. Links in HTML

Code:

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
a:link{
   color:red;
}
a:visited{
   color: purple;
}
a:hover{
   color:pink;
}
</style>
</head>
 <body>
<a href="headings.html">Link</a>
</html>

Output Before-

html link

Now Hover-

html link tag

Visited-

html link

4. Border-color in HTML

Code:

<!DOCTYPE html>
<html>
<head>
  <title>DataFlair</title>
</head>
<body>
<h1 style="border:2px solid Tomato;">DataFlair</h1>
<h1 style="border:2px solid DodgerBlue;">DataFlair</h1>
<h1 style="border:2px solid Violet;">DataFlair</h1>
</body>
</html>

Output:

html color codes

HTML Colors can be represented in the following ways-

1. Using predefined colors in HTML

Code:

<!DOCTYPE html>
           <html lang="en-US">
<head>
</head>
 <body style="background-color: yellow;">
<p>Welcome to DataFlair</p>
</html>

Output:

html background color

2. RGB and RGBA Colors in HTML

RGB specifies red, green, and blue colors. These values can range from 0 to 255 based on the intensity. This means that there is a total of 16777216 colors(256*256*256).
Some common colors-

  • rgb(0,0,0)-Black
  • rgb(255,255,255)-White
  • rgb(255,0,0)-Red
  • rgb(0,255,0)-Green
  • rgb(0,0,255)-Blue
  • Shades of gray- rgb(60,60,60), rgb(120,120,120),rgb(180,180,180),rgb(240,240,240).

These values can be mixed as per your preferences.
In RGBA, A defines Alpha, i.e., opacity.
Alpha lies between 0.0(fully transparent) and 1.0(not transparent,opaque).

Code:

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>
</head>  
<body style="background-color: rgb(255,99,71">
<h1 style="text-align: center;"><u><i> Welcome to DataFlair</i></u></h1> 
<h2 style="text-align: center;"><u>About Us</u></h2> 
<p align="center" style="color: rgba(255,255,255,0.8);">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>  
</html>

Output:

3. Hex Colors in HTML

Hex colors are specified in #RRGGBB where RR is red, GG is green, and BB is blue. These values are in hexadecimal integers.They also range from 0 to 255.

Common colors-

  • Red-#ff0000
  • Green-#00ff00
  • Blue-#0000ff
  • Black-#000000
  • White-#ffffff
  • Shades of Gray- #3c3c3c,#b4b4b4,#787878

Code:

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>
</head>  
<body style="background-color:#3cb371">
<h1 style="text-align: center;"><u><i> Welcome to DataFlair</i></u></h1> 
<h2 style="text-align: center;"><u>About Us</u></h2> 
<p align="center" style="color:#ffffff;">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>  
</html>

Output:

4. HSL and HSLA colors in HTML

HSL represents hues, saturation, and lightness. HSLA has an additional Alpha, which represents opacity.
Hue ranges from 0 to 360 and is the degree of color’s intensity.

For example,
0 is red,120 is green, 240 is blue.

  • Saturation represents the shade of a particular color. For example,
    0% is the shade of gray, and 100% is the entire color.
  • Lightness represents how much light you want and is also specified in percentages. For example,
    0% is black, 50% is in between light and dark, and 100% is white.

Some common colors-

  • Red-hsl(0,100%,50%)
  • Blue-hsl(240,100%,50%)
  • Black-hsl(0,100%,0%)
  • White-hsl(0,100%,100%)
  • Shades of grey- Specified by setting the hues and saturation to 0.
  • hsl(0,0%,47%),hsl(0,0%,71%).

In HSLA, A (Alpha) defines the opacity. It ranges from 0.0 to 1.0, where 0 is fully transparent, and 1.0 is opaque.

Code:

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>
</head>  
<body style="background-color:hsl(0,100%,25%);">
<h1 style="text-align: center;"><u><i> Welcome to DataFlair</i></u></h1> 
<h2 style="text-align: center;"><u>About Us</u></h2> 
<p align="center" style="color:hsla(0,100%,90%);">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>  
</html>

Output:

Below are some of the Standard Colors and their color codes:

Standard Colors

Summary

HTML colors are of great importance as they provide a visual appeal to the web-page. A large variety of colors can be intermixed in order to make the HTML as attractive as possible.

Your opinion matters
Please write your valuable feedback about DataFlair on Google

courses

Tags:

DataFlair Team

The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.

2 Responses

  1. Gangadhar Reddy Thumu says:
    February 11, 2024 at 4:57 pm

    Excellent notes

    Reply
  2. Harshvardhan Dusane says:
    June 22, 2024 at 12:39 pm

    Very Useful information Sir

    Reply

Leave a Reply

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