Table of Contents
What is HTML color?
HTML color is used for providing different colors to your website and may provide background color, text color, border color, and many more. HTML color consists of predefined color values and names. HTML language supports a total of 140 color codes which is having separate values for identification.
Syntax- < html start tag style= “color: value;” >Your text</ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title>background color</title>
</head>
<body data-rsssl=1>
<h2 style="background-color: rgba(248, 82, 138, 0.356)">
GEEKY4U.com(learn with passion)
</h2>
<h3 style="color: rgb(3, 82, 65)">GEEKY4U.com(learn with passion)</h3>
<p style="background-color: rgb(228, 215, 99)">
Geeky4u.com (Learn with Passion). This is a best platform where we are
providing best study material, best content so that it is easy for you to
learn everything and no one will stop you to become a master in
programming language
</p>
<h2 style="border: 2px solid rgba(56, 114, 221, 0.644)">THANK YOU</h2>
</body>
</html>
Output:
How to add color to an HTML document?
HTML language allows you to add different backgrounds as well as text and border colors into your document so that your text will look more attractive. If you want to add color in the HTML document then you need to add a style tag in the HTML start tag with color followed by a color value or color name.
Syntax- < html start tag style= “color: value;” >Your text</ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title>background color</title>
</head>
<body data-rsssl=1>
<h2 align="center" style= "background-color: rgba(112, 211, 250, 0.918)">
GEEKY4U.com(learn with passion)
</h2>
<h3 style="color: rgb(3, 82, 65)">GEEKY4U.com(learn with passion)</h3>
<p style="background-color: rgb(228, 215, 99)">
Geeky4u.com (Learn with Passion). This is a best platform where we are
providing best study material, best content so that it is easy for you to
learn everything and no one will stop you to become a master in
programming language
</p>
<h2 align="center"style="border: 2px solid rgba(56, 114, 221, 0.644)">THANK YOU</h2>
</body>
</html>
Output:
Different types of color styles used in HTML
Background color
The background color is used for providing background color to your text.
Syntax- < html start tag style= “Background-color: value;” >Your text</ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title>background color</title>
</head>
<body data-rsssl=1>
<h2 style="background-color: rgba(65, 231, 231, 0.356)">
GEEKY4U.com(learn with passion)
</h2>
<p style="background-color: rgb(226, 253, 107)">
Geeky4u.com (Learn with Passion). This is a best platform where we are
providing best study material, best content so that it is easy for you to
learn everything and no one will stop you to become a master in
programming language
</p>
</body>
</html>
Output:
Text color
If you want to give color to your text then text color is used. For adding text color you need to add a style tag into the HTML start tag along with color with their value and name.
Syntax- < html start tag style= “color: value;” >Your text</ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title>text color</title>
</head>
<body data-rsssl=1>
<h3 style="color: rgb(45, 197, 164)">GEEKY4U.com(learn with passion)</h3>
<h3 style="color: rgb(85, 107, 7)">GEEKY4U.com(learn with passion)</h3>
<h3 style="color: rgb(204, 48, 134)">GEEKY4U.com(learn with passion)</h3>
</body>
</html>
Output:
Border color
Border tag used for inserting borders to your text.
Syntax- < html start tag style= “border: px value ;” > Your text</ html end tag >
Example-
<!DOCTYPE html>
<html>
<head>
<title>border color</title>
</head>
<body data-rsssl=1>
<h2 style="border:2px solid rgba(56, 114, 221, 0.644); ">GEEKY4U.com(learn with passion)</h2>
<h2 style="border:2px solid rgba(107, 7, 57, 0.904); ">GEEKY4U.com(learn with passion)</h2>
</body>
</html>
Output:
Explain RGB and RGBA color?
RGB-(red, green, blue)
RGB color is a combination of three colors that is red, green, and blue. RGB colors are generally represented by rgb (red, green, blue). RGB color has a standard color set value which is used to represent the proper intensity of a color. The color in the RGB consists of a fixed value range between (0 to 255). In this 0 represents less intensity of color and 255 represents the high intensity of color
rgb (255, 0, 0)- This value represents a red color.
rgb (0, 255, 0)- This value represents green color.
rgb (0, 0, 255)- This value represents blue color.
rgb(0, 0, 0)- This value represents black color.
rgb(255, 255, 255)- This value represents white color.
RGBA-(red, green, blue, alpha)
To represent the opacity of a color high or low alpha color is used. The range which shows the transparency of color is (0.0 to 1.0). This 0.0 represents opacity which is having very high transparency. 1.0 represents the solid color means very low transparency.
Example- (RGB)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body data-rsssl=1>
<h1
style="
color: rgb(77, 77, 224);
background-color: rgb(241, 236, 212);
text-align: center;"
>
Example of rgb color
</h1>
<h1 style="text-align: center; color: rgb(16, 207, 207)">
rgb (red, green, blue).
</h1>
<p style="color: rgb(31, 9, 9);background-color: rgb(216, 211, 211);">
RGB color is a combination of three color that is red, green and blue. RGB
colors are generally represented by rgb (red, green, blue). Rgb color has
standard color set value which is use to represent the proper intensity of
a color. The color in the RGB consists of fixed value range between (0 to
255). this 0 represents less intensity of color and 255 represents high
intensity of color
</p>
</body>
</html>
Output:
Example- (RGBA) opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body data-rsssl=1>
<h1 style="background-color: rgb(20, 5, 5); opacity: 0.1;color: rgb(138, 130, 130);">Example of opacity </h1>
<h1 style="background-color: rgb(20, 5, 5); opacity: 0.2;color: rgb(100, 97, 97);">Example of opacity</h1>
<h1 style="background-color: rgb(20, 5, 5); opacity: 0.3;color: rgb(148, 144, 144);">Example of opacity</h1>
<h1 style="background-color: rgb(20, 5, 5); opacity: 0.5;color: rgb(153, 145, 145);">Example of opacity</h1>
<h1 style="background-color: rgb(20, 5, 5); opacity: 0.8; color: rgb(214, 214, 218);">Example of opacity</h1>
<h1 style="background-color: rgb(20, 5, 5); opacity: 1.0; color: rgb(245, 245, 248);">Example of opacity</h1>
</body>
</html>
Output:
Explain HEX color?
HEX color is also a combination of basic colors that is a red, green, blue color. HEX color can be written in the Hexadecimal format like #rrggbb. This (rr) is used for representing red color. (gg) is for representing green color and (bb) is used for representing blue color. HEX color also consists of fixed color value range 00 to ff means color from 0 to 255.
#ff0000-This value represents red color.
#00ff00- This value represents green color.
#0000ff- This value represents blue color.
#000000- This value represents black color.
#ffffff- This value represents white color.
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body data-rsssl=1>
<h1 style="text-align: center ;"> Example of HEX color</h1>
<h2 style="background-color: #ff0000 ;"> #ff0000-This value represents red color. </h2>
<h3 style="background-color: #00ff00 ;"> #00ff00- This value represents green color. </h3>
<h4 style="background-color: #0000ff ;"> #0000ff- This value represents blue color. </h4>
<h5 style="background-color: #000000 ;"> #000000- This value represents black color. </h5>
<h6 style="text-align: center ;"> Thank You</h6>
</body>
</html>
Output:
Explain HSL color?
HSL stands for HSL (hue, saturation, lightness).
Hue is generally used to represent the color degree which starts from 0 to 360.
- 0 is used to represent red color
- 120 is used to represent green color
- 240 is used to represent blue color
Saturation is used to represent a proper percentage of the color with saturation 0% to 100%.
Lightness is also represented in the percentage value between 0 to 100 for representing 0% as a black shade and 100% as a white shade.
Example- (variation of saturation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body data-rsssl=1>
<h1>Example of HSL color with variations in saturation</h1>
<h2 style="background-color: hsl(0, 100%, 50%); color:hsl(0, 100%, 90%) ;">HSL stands for HSL (hue, saturation, lightness). </h2>
<h2 style="background-color: hsl(0, 80%, 50%);"> color represents 80% saturation</h2>
<h2 style="background-color: hsl(0, 60%, 50%);"> color represents 60% saturation</h2>
<h2 style="background-color: hsl(0, 40%, 50%);"> color represents 40% saturation</h2>
<h2 style="background-color: hsl(0, 20%, 50%);">color represents 20% saturation</h2>
<h2 style="background-color: hsl(0, 10%, 50%);"> Thanks</h2>
</body>
</html>
Output:
Example- (variation of lightness)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body data-rsssl=1>
<h1>Example of HSL color with variations in lightness</h1>
<h2 style="background-color: hsl(0, 100%, 0%); color:hsl(0, 100%, 90%) ;">HSL stands for HSL (hue, saturation, lightness). </h2>
<h2 style="background-color: hsl(0, 100%, 25%);"> color represents 25% lightness</h2>
<h2 style="background-color: hsl(0, 100%, 45%);"> color represents 45% lightness</h2>
<h2 style="background-color: hsl(0, 100%, 50%);"> color represents 50% lightness</h2>
<h2 style="background-color: hsl(0, 100%, 75%);">color represents 75% lightness</h2>
<h2 style="background-color: hsl(0, 100%, 90%);"> Thanks</h2>
</body>
Output:
