DEV Community

loading...
Cover image for Css Hsl colors introduction

Css Hsl colors introduction

vanaf1979 profile image Stephan Nijman Originally published at since1979.dev ・1 min read

How to use the Hsl color functions in Css

In this video we will take a look at how we can ditch hex colors and adopt the amazing Hsl and Hsla functions inside of our css.

Check out this codepen and take a view minutes to try it out for yourself.

I promise you'll love it.

Subscribe and Follow

Subscribe to my Youtube channel.

Follow me on Twitter

Thanks for watching and stay safe

Discussion (4)

pic
Editor guide
Collapse
mrdanielschwarz profile image
Daniel Schwarz • Edited

Isn't rgba(), hsla(), etc. redundant now?

Instead, use hsl(0 % % / %);, where the alpha is optional.

It's friendlier with CSS variables too (hsl(var(--color) / %);).

Collapse
vanaf1979 profile image
Stephan Nijman Author

Oh cool, i didn't know that was possible.

Thanks for sharing Daniel! :)

Collapse
mrdanielschwarz profile image
Daniel Schwarz

Happy to help!

And long live hsl, the best format! 😉

Thread Thread
vanaf1979 profile image
Stephan Nijman Author

Yeah i realy love it! No more jumping into photoshop etc to find a color! 😀