CSS3 Series Tutorial: HSL and HSL

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 Hue Hue (H), saturation saturation (s), and Luma lightness (L) to set the color.

Hue is derived from the color dial: 0 and 360 are red, close to 120 is green, 240 is blue.

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

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

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

Browser compatibility:

HSL and Hsla are currently 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

div.hsll1 {BACKGROUND:HSL (100%, 50%); height:20px;} div.hsll2 {BACKGROUND:HSL (+/-50%, 50%); height:20px;} div.h slL3 {BACKGROUND:HSL (100%, 75%); height:20px;} div.hsll4 {BACKGROUND:HSL (202, 100%, 50%); height:20px;} div.hslL5 {BACKGROUND:HSL (202, 50%, 50%); height:20px;} div.hsll6 {BACKGROUND:HSL (202, 100%, 75%); height:20px;}

Browser support:

• Firefox 3.05+
• Google Chrome 1.0.154+
• Internet Explorer 8-
• Opera 9.6 +
• Safari 3.2.1 +

CSS3 HSLA

The above effect is implemented by the following styles:

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); Heigh t:20px; } DIV.HSLAL5 {Background:hsla (165, 35%, 50%, 1.0); height:20px;}

Browser support:

• Firefox 3.05+
• Google Chrome 1.0.154+
• Internet Explorer 8-
• Opera 9.6-
• Opera 10
• Safari 3.2.1+

CSS3 Series Tutorial | front-end Observation

• CSS3 Series Tutorial: Introduction
• CSS3 Series Tutorials: Rounded corners, border radii
• CSS3 Series Tutorial: Border color
• CSS3 Series Tutorial: Shadows
• CSS3 Series Tutorial: Background image
• CSS3 Series Tutorial: Multi-column/multi-volume
• CSS3 Series Tutorial: Embedding font types
• CSS3 Series Tutorial: Transparent
• CSS3 Series Tutorial: RGBA
• CSS3 Series Tutorial: HSL & HSLA

CSS3 Series Tutorial: HSL and HSL