skip to content

HSLA editor

This week's widget is a simple HSLA color slider

See the Pen HSLA editor by Tristan White (@triss90) on CodePen.

HSLA colors in CSS can be used to define color properties for various elements in your web design. HSLA stands for Hue, Saturation, Lightness, and Alpha.

Here's a breakdown of how each component of HSLA is used in CSS:

Here's how you can define HSLA color in CSS:

element {
    background-color: hsla(120, 100%, 50%, 0.3);

In the above example, the background-color of the element is set to a color with hue 120 (green), 100% saturation (full color), 50% lightness (neither light nor dark), and 0.3 alpha (somewhat transparent).