Using HSL values


show more Using HSL values provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Core Concepts show less
please wait ...

Using HSL values

HSL stands for hue, saturation and lightness and represents a fairly recent addition to CSS in terms of being another option for defining color. Now HSL is defined as a mixture of a color's hue, saturation and lightness value. Sometimes it's referred to as brightness. A color's hue is represented as an angle on the color wheel as such as the color wheel you're seeing here, with ranges from 0 to 360. Now red is at 0 and 360, it's kind of at both if them. Green is at 120, blue is at 240 and all those other colors such as a yellow, orange and violet are found between those values as you just sort of go around that color wheel.

Saturation represents the amount of color, how much color a particular shade has. With 100% being fully saturated and 0% being grayscale.Lightness is how bright or dark the color is, and just like saturation it's defined using a percentage with 100% being very bright such as white and 0% being black. So now that we sort of know how HSL works, l...

Using HSL values
Video duration: 5m 17s 8h 52m Beginner

Viewers:

Using HSL values provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Core Concepts

Subject:
Web
Software:
CSS
Author:
please wait ...