What are the different types of color codes in HTML?
Color codes are the way to represent colors in some format which can be easily interpreted by computers. There are various ways to represent these colors. While adding colors to any element on the page, we use these color codes.
Formats used for color codes in HTML are:
- Hex color codes
- Color name
- RGB values
- HSL values
Hex color codes
Hex color codes are the most popular way to add any color to HTML elements. It consists of the three-byte hexadecimal numbers where each byte has pair of characters. The hex color code is prefixed with '#' followed by 6 characters. These 6 characters must be a hexadecimal number. That is each character can be a number from [0-9] or a letter from [A-F].
Each pair of Hex codes has a special meaning.
- The first two variables of the hex code represent the intensity of the red color. For lower intensity use 00 and for highest intensity use FF.
- The middle two-variable of hex code represents the intensity of green color.
- And the last two variables of hex code represent the intensity of blue color.
For example #FFFFFF represents the white color with the highest intensity and #000000 represents the black color with the lowest intensity.
Here is a small program to add colors using Hexcode. We have used inline CSS to add color.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<body>
<h2 style="color: #FFA012"> Hex color codes </h2>
<p style="color: #FF0000">Hex code #FF0000- Only Red color with no green and no blue </p>
<p style="color: #0000FF">Hex code #0000FF- Only blue color with no green and no red </p>
<p style="color: #00FF00">Hex code #00FF00- Only green color with no blue and no red </p>
<p style="color: #FFFF00">Hex code #FFFF00- some mixture of red and blue color </p>
<p style="color: #AAAAAA">Hex code #AAAAAA- represent grey shade </p>
<p style="color: #F25CBB">Hex code #F25CBB- represent pink shade </p>
</body>
</html>
Output
Here is the output of the above program.
Color name
Remembering the hex code for different colors may be difficult for the learners. So you can simply add the color name to add colors to the element. HTML supports 140 color names. Some examples of color names are tomato, orange, green, blue, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<body>
<h2 style="background-color: red"> color names </h2>
<p style="background-color: aqua">Aqua </p>
<p style="background-color: crimson">Crimson </p>
<p style="background-color: darkorchid">darkorchid </p>
<p style="background-color: plum">plum </p>
<p style="background-color: lemonchiffon">lemonchiffon </p>
<p style="background-color: teal">teal</p>
</body>
</html>
Output
We have added a background color to the element using color names.
RGB color values
There is yet another way to add colors to the HTML element. That is using RGB(Red, Green, Blue) values.
Each parameter has a value from [0-255]. The value defines the intensity of each color. For example, rgb(255,0,0) displays the red color as it has the highest intensity.
Here is an example of adding color using RGB values.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<body>
<h2 style="background-color: rgb(255,0,0)"> RGB color </h2>
<p style="background-color: rgb(0,255,0)">rgb(0,255,0) </p>
<p style="background-color: rgb(0,0,255)">rgb(0,0,255) </p>
<p style="background-color: rgb(0,0,0)">rgb(0,0,0) </p>
<p style="background-color: rgb(255,255,255)">rgb(255,255,255) </p>
<p style="background-color: rgba(100,150,175)"> rgba(100,150,175)</p>
</body>
</html>
Output
HSL colors values
HSL values can be used to add color to the HTML element. HSL stands for (hue, saturation, lightness).
The hue is the degree of the color wheel which can have a value from (0-360). Saturation and lightness use percentage values. Saturation with 0% means grey shade whereas 100% saturations define a full color. In lightness, 0% means black whereas 100% means white.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<body>
<h2 style="background-color: hsl(0,100%,50%)"> HSL color </h2>
<p style="background-color: hsl(145,25%,50%)">hsl(145,25%,50%) </p>
<p style="background-color: hsl(360,50%,50%)">hsl(360,50%,50%) </p>
<p style="background-color: hsl(245,25%,70%)">hsl(245,25%,70%) </p>
<p style="background-color: hsl(100,75%,40%)">hsl(100,75%,40%)</p>
</body>
</html>
Output
Here is the output of the program using HSL color values.
Conclusion
There are hundreds of color shades available in HTML. You can add colors using either color names which is the simplest way or by using hex codes, RGB values, or HSL values.
Choose any color code and make your website colorful with HTML colors.
