HTML HSLA Colors
HSLA color is an extension of HSL (Hue, Saturation, Lightness) that adds an Alpha channel for transparency.
What is Hue, Saturation, and Lightness, Alpha?
The Hue (0–360) defines the base color.
Saturation (0%–100%) controls how vivid the color is.
Lightness (0%–100%) adjusts the brightness.
Alpha (0 to 1) sets the transparency level, where 0 is fully transparent and 1 is fully opaque.
HSLA is useful in web design for creating layered effects, shadows, or overlays with adjustable visibility.
Example:
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<h4>A Primary Color </h4>
<h4 style="background-color:hsla(9, 100%, 64%, 0);"> background-color:hsla(9, 100%, 64%, 0) </h4>
<h4 style="background-color:hsla(9, 100%, 64%, 0.2);"> background-color:hsla(9, 100%, 64%, 0.2) </h4>
<h4 style="background-color:hsla(9, 100%, 64%, 0.4);"> background-color:hsla(9, 100%, 64%, 0.4) </h4>
<h4>A Seconday Color </h4>
<h4 style="background-color:hsla(60, 100%, 50%, 0);"> background-color:hsla(60, 100%, 50%, 0) </h4>
<h4 style="background-color:hsla(60, 100%, 50%, 0.2);"> background-color:hsla(60, 100%, 50%, 0.2) </h4>
<h4 style="background-color:hsla(60, 100%, 50%, 0.4);"> background-color:hsla(60, 100%, 50%, 0.4) </h4>
</body>
</html>
Output
HSLA Color Generator
0
100%
50%
0.5
hsla(0, 100%, 50%,0.5)
Primary and Secondary HSL Colors
hsla(9, 100%, 64%, 0);
hsla(9, 100%, 64%, 0.2);
hsla(9, 100%, 64%, 0.4);
hsla(9, 100%, 64%, 0.6);
hsla(9, 100%, 64%, 0.8);
hsla(9, 100%, 64%, 1);
