Example of simple use of HSL and Hsla in CSS3

Using the CSS3 HSL declaration is also used to set the color. What's next? HSLA? Yes, this is the same as the Rgba effect.

The HSL declaration uses tonal hue (H), saturation saturation (s), and brightness lightness (L) to set the color.

Hue derived from the color plate: 0 and 360 are red, nearly 120 are green, and 240 is blue.

Saturation value is a percentage: 0% is grayscale, 100% saturation is the highest

The lightness value is also a percentage: 0% is the darkest, 50% mean, and 100% is the brightest.

Random thoughts: Why is "ligntness"? Maybe I'm more used to the "brightness" in Photoshop ...

Browser compatibility:

Currently HSL and Hsla are well supported by Firefox, Google Chrome, and Safari browsers, and do not require any prefix

CSS3 HSL

The above demo is implemented by the following styles

CSS code copy content to clipboard

div.hsll1 {BACKGROUND:HSL (100%, 50%); height:20px;}

div.hsll2 {BACKGROUND:HSL (50%, 50%); height:20px;}

Div.hsll3 {BACKGROUND:HSL (100%, 75%); height:20px;}

DIV.HSLL4 {BACKGROUND:HSL (100%, 50%); height:20px;}

DIV.HSLL5 {BACKGROUND:HSL (50%, 50%); height:20px;}

div.hsll6 {BACKGROUND:HSL (100%, 75%); height:20px;}

CSS3 HSLA

The effect above is implemented by the following styles:

CSS code copy content to clipboard

Div.hslal1 {Background:hsla (165, 35%, 50%, 0.2); height:20px;}

Div.hslal2 {Background:hsla (165, 35%, 50%, 0.4); height:20px;}

Div.hslal3 {Background:hsla (165, 35%, 50%, 0.6); height:20px;}

Div.hslal4 {Background:hsla (165, 35%, 50%, 0.8); height:20px;}

DIV.HSLAL5 {Background:hsla (165, 35%, 50%, 1.0); height:20px;}