![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Colors.jpg\")
<\/a><\/p>\nHTML Colors<\/h2>\n
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.<\/p>\n
For example,<\/p>\n
1. Background-color in HTML<\/h3>\n
Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n Code:<\/strong><\/p>\n Output Before-<\/strong><\/p>\n Now Hover-<\/strong><\/p>\n Visited-<\/strong><\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n HTML Colors can be represented in the following ways-<\/strong><\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n 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). These values can be mixed as per your preferences. Code:<\/strong><\/p>\n Output:<\/b><\/p>\n 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.<\/p>\n Common colors-<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n HSL represents hues, saturation, and lightness. HSLA has an additional Alpha, which represents opacity. For example, Some common colors-<\/p>\n 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.<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n Below are some of the Standard Colors and their color codes<\/a>:<\/strong><\/p>\n<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body style=\"background-color: yellow;\">\r\n<p>Welcome to DataFlair<\/p>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n2. Text-color in HTML<\/h3>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body style=\"color: red;\">\r\n<p>Welcome to DataFlair<\/p>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n3. Links in HTML<\/h3>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<style>\r\na:link{\r\n color:red;\r\n}\r\na:visited{\r\n color: purple;\r\n}\r\na:hover{\r\n color:pink;\r\n}\r\n<\/style>\r\n<\/head>\r\n <body>\r\n<a href=\"headings.html\">Link<\/a>\r\n<\/html>\r\n<\/pre>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n4. Border-color in HTML<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>DataFlair<\/title>\r\n<\/head>\r\n<body>\r\n<h1 style=\"border:2px solid Tomato;\">DataFlair<\/h1>\r\n<h1 style=\"border:2px solid DodgerBlue;\">DataFlair<\/h1>\r\n<h1 style=\"border:2px solid Violet;\">DataFlair<\/h1>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/a><\/p>\n1. Using predefined colors in HTML<\/h3>\n
<!DOCTYPE html>\r\n <html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body style=\"background-color: yellow;\">\r\n<p>Welcome to DataFlair<\/p>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n2. RGB and RGBA Colors in HTML<\/h3>\n
\nSome common colors-<\/p>\n\n
\nIn RGBA, A defines Alpha, i.e., opacity.
\nAlpha lies between 0.0(fully transparent) and 1.0(not transparent,opaque).<\/p>\n<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body style=\"background-color: rgb(255,99,71\">\r\n<h1 style=\"text-align: center;\"><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2 style=\"text-align: center;\"><u>About Us<\/u><\/h2> \r\n<p align=\"center\" style=\"color: rgba(255,255,255,0.8);\">\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html><\/pre>\n
<\/a><\/p>\n3. Hex Colors in HTML<\/h3>\n
\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body style=\"background-color:#3cb371\">\r\n<h1 style=\"text-align: center;\"><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2 style=\"text-align: center;\"><u>About Us<\/u><\/h2> \r\n<p align=\"center\" style=\"color:#ffffff;\">\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n4. HSL and HSLA colors in HTML<\/h3>\n
\nHue ranges from 0 to 360 and is the degree of color\u2019s intensity.<\/p>\n
\n0 is red,120 is green, 240 is blue.<\/p>\n\n
\n0% is the shade of gray, and 100% is the entire color.<\/li>\n
\n0% is black, 50% is in between light and dark, and 100% is white.<\/li>\n<\/ul>\n\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<\/head> \r\n<body style=\"background-color:hsl(0,100%,25%);\">\r\n<h1 style=\"text-align: center;\"><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2 style=\"text-align: center;\"><u>About Us<\/u><\/h2> \r\n<p align=\"center\" style=\"color:hsla(0,100%,90%);\">\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html> \r\n<\/pre>\n
<\/a><\/p>\n