From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

How does HSL work?

How does HSL work? - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

How does HSL work?

“

- Let's talk about colors for a moment. Anytime you create a CSS color I bet you use on of these values. This is a hex value so you have a hash symbol, and then some version of some numbers and some letters that really doesn't make any sense for human beings, but somehow makes sense for the computer. So for example, this here, 30d5ff, is a really nice teal color, like blue, sea foam greenish, tealy color, so what's actually happening here is the two first numbers are the red color value, the two second numbers are the green color value, and the two third numbers are the blue color value. That's because the screen that displays these colors back to us is using a combination of red, green, and blue, to create whatever color we want. To see how that works, cause this is like a computer shorthand for these values, and this makes no sense for humans unless you really know your stuff, I don't, I think I know one person who understands what this is, you can also in CSS write out the actual…

Contents