HTML Color Attribute

In the previous article, Mytour introduced you to the HTML comment tag. In the following article, Mytour will continue the discussion on the color attribute in HTML.

HTML Color Attribute

1. HTML Color Attribute

1.1 Color Name

In HTML, colors can be specified using color names.

Example: Below is an example of how to specify colors in HTML:

The returned result looks like the following:

HTML supports 140 different color codes and color names.

1.2 Background Color in HTML

We can set background color for HTML elements.

Example: The example below illustrates setting background colors for HTML elements:

The resulting output after applying background colors in HTML looks like the following:

1.3 Setting Text Color in HTML

In addition to setting background color, we can also set text color in HTML.

Example: The example below illustrates setting text colors in HTML:

The resulting output after applying text colors in HTML looks like the following:

Similarly, we can set colors for borders in HTML.

Example: The example below illustrates setting border colors in HTML:

The resulting output after applying colors for borders looks like the following:

1.5 Color Values in HTML

In HTML, we can specify colors using values such as RGB, HEX, HSL, RGBA, and HSLA.

For Example: The example below illustrates using color values in HTML:

The resulting output after applying color values looks like the following:

1.6 RGB Values in HTML

In HTML, we can specify a color in RGB format using the following formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) determines the color intensity ranging from 0 to 255.

Example 1: The rgb value (255, 0, 0) will display the color red, as red is set to the highest value (255) while the other values are set to 0.

To display the color black, we simply need to set all color parameters to 0, in the following format: rgb(0, 0, 0).

To display the color white, we simply need to set all color parameters to 255, in the following format: rgb(255, 255, 255).

Example 2: In the example below, we will mix RGB values:

The result returned after applying mixed RGB values will be as follows:

To display dark muted colors, we use equal values.

Example 3: The example below displays dark muted colors:

The returned result looks like the following:

1.7 HEX Value in HTML

To specify colors in HTML using Hex values, we use the formula below:

#rrggbb

In the formula above, rr represents red, gg represents green, and bb represents blue, all in hexadecimal values ranging from 00 to ff.

Example 1: #ff0000 displays red because red is set to the highest value (ff), while the other values are set to the lowest (00).

The returned result looks like the following:

To display dark muted colors, we use equal values.

Example 2: The example below displays dark muted colors:

The returned result looks like the following:

1.8 HSL Value in HTML

Colors in HTML can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

In the above formula:

- Hue ranges from 0 to 360. 0 is red, 120 is green, and 240 is blue.

- Saturation ranges from 0 to 100%, where 0% is gray and 100% is full.

- Lightness ranges from 0 to 100%, where 0% is black, 50% is medium, and 100% is white.

Example: The example below illustrates how to use HSL values in HTML:

The returned result has the following format:

1.9 RGBA Value in HTML

RGBA color value is an extension of RGB value with an alpha channel - indicating the opacity of the color.

RGBA color value is specified by the formula:

rgba(red, green, blue, alpha)

In the above formula, the alpha parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

Example: Here is an example of RGBA value in HTML:

The returned result has the following format:

1.10 HSLA Color Value in HTML

The HSLA color value is an extension of the HSL color value with an alpha channel - indicating the opacity of the color.

The HSLA color value is specified by the formula:

hsla(hue, saturation, lightness, alpha)

In the above formula, the alpha parameter is a number ranging from 0.0 (completely transparent) to 1.0 (completely opaque).

Example: Below is an example of the HSLA value in HTML:

The resulting output is as follows:

In the preceding article, Mytour has just introduced you to the color attribute in HTML. In the next article, Mytour will further introduce you to the style attribute in HTML.