DEV Community

Cover image for Css Hsl colors introduction
Stephan Nijman
Stephan Nijman

Posted on • Originally published at since1979.dev

Css Hsl colors introduction

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)

Collapse
mrdanielschwarz profile image
Daniel Schwarz • Edited on

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! 😀