HTML supports a wide range of colors that can be used to style various elements of a web page.
The following are the ways to specify colors in HTML:
Color names
You can use color names (for example: red, green, blue, etc.) in a CSS file or inline HTML styling to style the elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Colors</title>
</head>
<body>
<p style="color: red">This text is red.</p>
<p style="color: blue">This text is blue.</p>
<p style="color: green">This text is green.</p>
</body>
</html>
Hexadecimal Notation
HTML colors can also be specified using a hexadecimal notation.
This method uses a combination of 6 hexadecimal digits (0-9 and A-F) to represent a color.
The first two digits represent the red component, the next two digits represent the green component, and the last two digits represent the blue component.
For example, #FF0000 represents red, #00FF00 represents green, and #0000FF represents blue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Colors</title>
</head>
<body>
<p style="color: #ff0000">This text is red.</p>
<p style="color: #0000ff">This text is blue.</p>
<p style="color: #00ff00">This text is green.</p>
</body>
</html>RGB Notation
HTML colors can also be specified using an RGB notation.
RGB stands for red, green, and blue, and it uses three numbers (0-255) to represent the amount of each color component.
For example, rgb(255, 0, 0) represents red, rgb(0, 255, 0) represents green, and rgb(0, 0, 255) represents blue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Colors</title>
</head>
<body>
<p style="color: rgb(255, 0, 0)">This text is red.</p>
<p style="color: rgb(0, 0, 255)">This text is blue.</p>
<p style="color: rgb(0, 255, 0)">This text is green.</p>
</body>
</html>HSL Notation
HTML colors can also be specified using an HSL notation.
HSL stands for hue, saturation, and lightness.
Hue is represented as an angle (0-360 degrees), saturation and lightness are represented as a percentage (0-100%).
For example, hsl(0, 100%, 50%) represents red, hsl(120, 100%, 50%) represents green, and hsl(240, 100%, 50%) represents blue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Colors</title>
</head>
<body>
<p style="color: hsl(0, 100%, 50%)">This text is red.</p>
<p style="color: hsl(240, 100%, 50%)">This text is blue.</p>
<p style="color: hsl(120, 100%, 50%)">This text is green.</p>
</body>
</html>