HTML Colors HSL and HSLA
The purpose of this article is to provide an overview of HSL and HSLA color models, how they work, and how they can be utilized in HTML documents. In addition to comparing HSL and HSLA color codes with traditional RGB and HEX color codes, we will also look at some practical examples.
Html Colors HSL values with an Alpha channel (opacity) are called HSLA color values.
HTML Color HSL Values
Using HTML, you can specify a color’s hue, saturation, and lightness (HSL) in the following format:
hsl(hue, saturation, lightness)
Color hue range from 0 to 360 degrees on the color wheel. It is red when it is 0, green when it is 120, and blue when it is 240 in Html colors.
The saturation value is expressed as a percentage, where 0% represents gray, and 100% represents full color.
As a percentage value, lightness can also be expressed as 0% black, 100% white, or any combination thereof.
Try mixing the HSL values below:
hsl(0, 100%, 50%)
HUE
SATURATION
LIGHTNESS
Example
Example Explanation
The above example shows a HTML code that defines a web page with six headings (h1 elements), each with a different background color specified using the HSL color model. The HSL color model stands for Hue, Saturation, and Lightness, and it provides a way to specify colors by defining the hue, saturation, and lightness of the color.
In the given code, the style attribute is used to add style information to each h1 element. The background-color property sets the background color of the element, and the value is specified using the HSL color model. The first value in the HSL function represents the hue of the color, which can range from 0 to 360 degrees. The second value represents the saturation, which can range from 0% (gray) to 100% (fully saturated). The third value represents the lightness, which can range from 0% (black) to 100% (white).
For example, the first h1 element has a background color specified using the HSL value “hsl(0, 100%, 50%)”. This means that the color has a hue of 0 degrees (red), a saturation of 100% (fully saturated), and a lightness of 50% (medium brightness). Similarly, the other h1 elements have different HSL values that result in different colors with varying hues, saturation, and lightness.
When this code is rendered by a web browser, it will display a page with six headings, each with a different background color specified using the HSL color model. The colors will range from bright red (#ff0000) to dark purple (#6a5acd), depending on the specific HSL values used.
Saturation
Color saturation can be defined as the intensity of a color in Html colors.
There are no gray shades when it comes to 100%. It’s pure color
Although 50% of the color is gray, you can still see it.
You can’t see the color at 0% because it’s completely gray.
Example
Shades of Gray
Grey shades are often formed by setting the hue and saturation to zero and adjusting the lightness from 0% to 100% in Html colors:
Example
Lightness
Lightness is measured by how much light you want a color to get, with 0% being no light (black), 50% being 50% light (neither dark nor light), and 100% being full lightness (white).
Example
HTML Colors HSLA Values
A color value with an Alpha channel is referred to as an HSLA value
A color’s opacity is specified by this value.
Color values specified in HSLA are as follows:
hsla(hue, saturation, lightness,
alpha)
Alpha represents the degree of transparency, ranging from 0.0 (full transparency) to 1.0 (no transparency):
You can experiment by mixing the HSLA values below:
hsla(0, 100%, 50%, 0.5)
HUE
SATURATION
LIGHTNESS
ALPHA
Example
Advantages of using HTML Colors HSL and HSLA
HTML colors based on the HSL and HSLA color models have several advantages over those based on other color models. The following are some of the key advantages:
Intuitive: HSL color models are often preferred because they are based on familiar concepts such as hue, saturation, and lightness. Designers can then create colors that match their vision more easily.
Hue range: Designers can create a variety of colors with HSL, including subtle hues and pastels that other color models cannot.
Lightness and darkness: HSL color models can be adjusted with the lightness parameter to determine how light or dark a color is. You can easily create shades of a color and add depth and dimension.
Opacity: HSLA color models allow designers to specify a color’s transparency, giving them greater control over how colors interact with other elements.
Accessibility: In order to increase accessibility, HSL and HSLA colors should be contrasted with the background color in an adequate way. It is essential that all users, including those with disabilities, have access to web content.
