HTML Colors

Colors can bring life and vibrancy to your web pages. They help you create visually appealing and engaging websites.

HTML provides several ways to specify colors on a web page. Colors can be specified using named colors, RGB values, HEX codes, or HSL values. 

Let’s start by understanding how colors are represented in HTML. In HTML, colors can be specified in different ways. Here's an overview of each method:
 

Named Colors

HTML provides a set of predefined named colors that can be used to set the color of text and other elements. HTML defines a set of 140 named colors that you can use in your pages. Here are some examples:

<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>

In this example, the “color” property is used to set the colour of the text, using the “style” attribute. Here The value of color property set, such as “red”, “blue” or “green”.

RGB Values Colors

RGB values are used to specify colors by specifying the amounts of red, green, and blue that make up the color. RGB values are specified as three numbers between 0 and 255, separated by commas. Here are some examples:

<p style="color: rgb(255, 0, 0);">This text is red.</p>
<p style="color: rgb(0, 255, 0);">This text is green.</p>
<p style="color: rgb(0, 0, 255);">This text is blue.</p>

In this example, the “color” property is set to an RGB value using “style” attribute. The first number represents the amount of red, the second represents the amount of green, and the third represents the amount of blue.

Hexadecimal Codes Colors

HEX codes are another way to specify colors. HEX codes are six-digit codes that represent the amount of red, green, and blue that make up the color in hexadecimal format. Here are some examples:

<p style="color: #FF0000;">This text is red.</p>
<p style="color: #00FF00;">This text is green.</p>
<p style="color: #0000FF;">This text is blue.</p>

In this example, the “color” property is set to a HEX code is used to set the colour of the text, using the “style” attribute. The first two digits represent the amount of red, the second two represent the amount of green, and the last two represent the amount of blue.

HSL Values Colors

HSL values are used to specify colors using hue, saturation, and lightness. HSL values are specified as three values between 0 and 360 for hue, and between 0% and 100% for saturation and lightness. Here are some examples:

<p style="color: hsl(0, 100%, 50%);">This text is red.</p>
<p style="color: hsl(120, 100%, 50%);">This text is blue.</p>
<p style="color: hsl(240, 100%, 50%);">This text is blue.</p>

In this example, the “color” attribute is set to an HSL value is used to set the colour of the text, using the “style” attribute. The first value represents the hue (0 is red, 120 is green, and 240 is blue), the second represents the saturation, and the third represents the lightness.

Overall, HTML provides several ways to specify colors on a web page, making it easy to create visually appealing designs.

Watch this Chapter Video on YouTube: