HTML HSL (Hue, Saturation, Lightness) and HSLA (Hue, Saturation, Lightness, Alpha) colors are another way to specify colors in HTML and CSS. HSL colors define a color based on its hue, saturation, and lightness, while HSLA colors also include an alpha value for transparency.
Hue is the color’s position on the color wheel, measured in degrees from 0 to 360. Saturation is the intensity or purity of the color, measured as a percentage from 0% (gray) to 100% (fully saturated). Lightness is the brightness of the color, also measured as a percentage from 0% (black) to 100% (white).
The syntax for an HSL color value is:
hsl(hue, saturation, lightness)
The syntax for an HSLA color value is:
hsla(hue, saturation, lightness, alpha)
The alpha value in HSLA specifies the opacity of the color, with 0 being fully transparent and 1 being fully opaque.
Here are some examples of HSL and HSLA color codes:
- hsl(0, 100%, 50%): Red
- hsl(120, 100%, 50%): Green
- hsl(240, 100%, 50%): Blue
- hsl(60, 100%, 50%): Yellow
- hsla(0, 100%, 50%, 0.5): Semi-transparent red
You can use an online color picker or a tool like Photoshop to choose the HSL or HSLA values for your desired color.