HSL() / HSLa() Is Great for Programmatic Color Control

Chris Coyier / filed under HTML & CSS

If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We’ve talked about it before but we can break it down a little more and do some interesting things with it.

Subscribe to newsletter

Design and frontend links delivered to your inbox every day and week. No spam, unsubscribe at anytime.

Choose frequency

Permission