Why hsl($Hue, $Saturation, $Luminosity) is human friendly! | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 3

Why hsl($Hue, $Saturation, $Luminosity) is human friendly!

After playing with colors and web design for a while, I find hsl / hsla color methods more human friendly. $Hue - color in degrees and counterclockwise direction on color wheel: 0(360) deg - red 120 deg - green 240 deg - blue $Saturation - percentage value: 0% means a shade of gray and 100% is the full color. $Luminosity - percentage value: 0% is black, 100% is white. See what I mean: hsl(271, 76%, 53%) // blueviolet rgb(138, 43, 226) hex: #8a2be2

8th Jul 2017, 2:13 PM
Benneth Yankey
Benneth Yankey - avatar
3 Answers
+ 5
More human friendly than mixing three primary colors as with hsl system the 'hue' define the color among rainbow colors that you can represent as a wheel with continuous color walking around it (with a value modulus 360 to target the color at a particular angle on the wheel in degrees... and 'saturation' (from gray to full color) and 'luminosity' (from black to white, middle is full color) is used to set more or less colorfullness and luminosity to the given plain color ;)
8th Jul 2017, 2:38 PM
visph
visph - avatar
+ 5
My Fire Wall code actually uses it, https://code.sololearn.com/W2BvrBnXBu1H/?ref=app
8th Jul 2017, 2:40 PM
Karl T.
Karl T. - avatar
+ 4
Yeah it is...the HSL chart is a 3d cone IIRC, it's simpler to define colors that way.
8th Jul 2017, 2:26 PM
Karl T.
Karl T. - avatar