html

HTML Colors | RGB, HEX, HSL Explained

HTML colors enhance the appearance of the webpage. In HTML colors can be specified to any element using the style attribute. When we talk about HTML colors, the “color” and “background-color” properties are used quite often in the HTML Style attribute to set the color of text and background color of an HTML element.

This write-up will demonstrate how to add colors to an HTML element/document. It will provide a general overview of basic color conventions like “color names”, “RGB values”, “Hexadecimal values” etc. So, let’s start!

HTML Color Names

The first way of implementing HTML colors is to simply use the color name i.e. English words for the color such as green, yellow, red, etc. HTML supports more than a hundred standard color names.

Example

Suppose we have a paragraph in our HTML:

<p>A paragraph</p>

To give it a color let’s say green, we can do this:

<p style="color: green">A paragraph</p>

HTML Hexadecimal Color

HTML supports another way of adding colors i.e. the hexadecimal values. Hexadecimal values can be written using sixteen digits 0-9 and A-F. It is determined by a “#” symbol followed by three or six digits. For example: #RRGGBB. Here first two slots represent red, the adjacent two slots show green, and the last two show blue value.

Example

Suppose we have a paragraph in our HTML:

<p>A paragraph</p>

This time we will try to set the background color of <p> tag to gray using hexadecimal values and we can do this using the following line HTML code:

<p style="background-color: #e3e3e3">A paragraph</p>

In the above code, “#e3e3e3” is the hex code of gray color.

The hexadecimal values can be written using just three digits instead of six digits. For example, the hexadecimal value #f00 will produce the same color as #ff0000.

HTML RGB Colors

Another most frequently used method for colors is RGB values. It takes three values i.e. red, green, and blue. Instead of using the strange hexadecimal numbers, the RGB property utilizes numbers from 0 to 255. These numbers determine the intensity of each color parameter, for example, to utilize the black color set all parameters to 0 i.e. rgb (0, 0, 0). The rgb (0, 0, 255) will display the blue color and so on.

Example

Let’s consider the same paragraph:

<p>A paragraph</p>

Now, we will try to set its background color to orange using RGB values and we can do this using the following line HTML code:

<p style="background-color: rgb(255, 165, 0)">A paragraph</p>

In the above code, “rgb(255, 165, 0)” is the rgb values for orange color.

HTML RGBA Colors

The RGBA values are an extension of RGB color values where “A” represents the alpha channel that specifies the opacity for a color. An alpha parameter is a number between 0(transparent) and 1 (opaque).

Example

This example shows how the alpha parameter “A” will be specified:

<p style="background-color: rgb(255, 165, 0, 0.3)">A paragraph</p>

The above-given code implemented the alpha parameter on <p> element. Now the result will be according to the amount of transparency as shown in the following output:

HTML HSL Colors

HTML provides another color convention i.e HSL determines a color with its hue, saturation, and light. Optionally it can have an alpha parameter as well.

  • The term hue determines an angel within the color wheel e.g. 0 or 360 degrees represents red color, similarly, remaining colors are separated around the circle. For example, green equals 120 degrees, cyan equals 180 degrees, and so on.
  • While the second value in HSL is saturation which determines the intensity of color and is represented by a % sign.
  • The third value is lightness which determines the lightness levels represented by the % sign.

For example, hundred percent means full light i.e. white while zero percent means no light i.e. black, and so on.

Example

The below-given script will implement the HSL color convention on different HTML elements:

<p style="background-color: hsla(8, 50%, 75%);">A paragraph</p>

We will get the following output for the above code:

Conclusion

HTML provides multiple color conventions to set the text color, background color, etc. There are four ways to color an HTML element: color name, RGB values, Hexadecimal values, and HSL values. To set the color using “color name” specify the name of color i.e. red, green. For RGB, combine color values red, green and blue between 0 to 255. For Hexadecimal color write three or six-digit color code. For HSL, set the values of Hue, Saturation, and Light.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.