HSL (and HSLa) Colors in CSS
In this post, we will give you information about HSL (and HSLa) Colors in CSS. Here we will give you detail about HSL (and HSLa) Colors in CSS and how to use it also give you a demo for it if it is necessary.
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 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 whatever 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 light 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 for HSL (and HSLa) Colors in CSS
Hope this code and post will help you implement HSL (and HSLa) Colors in CSS. if you need any help or any feedback give it in the comment section or you have a good idea about this post you can give it in the comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs