HSL (and HSLa) Colors in CSS

CSS has a hsl() function that is used to define colors in the HSL format which stands for Hue, Saturation and Lightness. All these three values can be set in the hsl() function in their respective order.

The hue component of HSL specifies the angle (degrees) in the color wheel.

HSL Color Wheel HSL Color Wheel by Erin Sowards.

  • Red has a hue of 0° or 360°,
  • Green has a hue of 120°,
  • Blue has a hue of 240°.

HSL saturation defines the amount of color, 100% is full saturated color, and 0% is a de-saturated color (gray)

HSL lightness defines the luminance or the brightness of the color (100% of lightness corresponds to the white color for whetever value of hue, 0% of lightness corresponds to the black, and 50% of lightness corresponds to the normal state of the color defined in hue)

Let's take a look at the following CSS example:

:root {
    background-color: hsl(0, 100%, 50%);
}

We define a full saturated and normal lightness red color for the background in the :root selector which corresponds to the <html> element.

What I like most about HSL is that by remembering the 120, 240, 360 values for green, blue and red you can easily define a range of beautiful colors by playing with the saturation and lightness percentages.

What About HSLA (Hue, Saturation, Lightness, Alpha)?

HSL has an alpha counterpart that takes a transparency value. It's the hsla() function, the last argument specifies the transparency (0 corresponds to full transparency and 1 corresponds to full opacity). For example:

:root {
    background-color: hsla(0, 100%, 50%, 1);
}

References

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status