What are the color channel functions in Less ?

LESS is one of the most popular CSS preprocessor languages that help us to reduce the complexity of CSS code using many features. LESS has many inbuilt functions in it which helps the user in different ways in writing their code and makes the code easier to understand and shorter to write. One such function in LESS is the color channel function.

In this article, we will learn about the color channel function in LESS.

The color channel function is one of the color functions available in LESS. The other are – color definition function, color operation function and color blending option. The color channel function helps us to extract the values of different color channels from the color. Like using the color channel function, we can extract the Hue, Saturation, Luma, Green, Blue components and many more other color channels.

The list of all color channels function available are given below:

• Hue() function
• Saturation() function
• Brightness() function
• Hsvhue() function
• Hsvsaturation() function
• Hsvvalue() function
• Red() function
• Green() function
• Blue() function
• Alpha() function

Now, let’s understand them one by one with example:

1. Hue(): This function helps us to extract the hue value from a given color channel in the hsl (hue , saturation, luminance) color space. It returns an integer in the range of 0 – 360.

Example:

background-color: hue(hsl(85,95%,100%))

Output:

background-color: background: 85

2. Saturation(): This function helps us to extract the saturation value from a given color channel in the hsl (hue, saturation, luminance) color space. This function returns a percentage value in the range 0-100%.

Example:

background-color: saturation(hsl(85,95%,100%))

Output:

background-color: 95%

3. Luminance(): This function helps us to extract the lightness channel (luminance) from a given color channel in hsl color space. This function returns a percentage value in the range 0 -100%.

Example:

background-color: luminance(hsl(85,95%,100%))

Output:

background-color: 100%

4. Hsvhue(): This function helps us to extract the hue value in the hsv color space. This function returns an integer value from 0-360.

Example:

background-color: hsvhue(hsv(90,80%,70%))

Output:

background-color: 90

5. Hsvsaturation(): This function helps us to extract the saturation value in the hsv color space. This function returns a percentage value from 0-100.

Example: 

background-color: hsvsaturation(hsv(90,80%,70%))

Output:

background-color: 80%

6. Hsvvalue(): This function helps us to extract the value channel in the hsv color space. This function returns a percentage value from 0-100.

Example:

background-color: hsvvalue(hsv(90,80%,70%))

Output:

background-color: 70%

7. Red(): This function helps us to extract the red channel value in the rgb color space. This function returns a float value from 0-255.

Example:

background-color: red(rgb(20,25,35))

Output: 

background-color: 20

8. Green(): This function helps us to extract the green channel value in the rgb color space. This function returns a float value from 0-255.

Example:

background-color: green(rgb(20,25,35))

Output:

background-color: 25

9. Blue(): This function helps us to extract the blue channel value in the rgb color space. This function returns a float value from 0-255.

Example:

background-color: blue(rgb(20,25,35))

Output: 

background-color: 35

10. Alpha(): This function helps us to extract the alpha channel value in the rgba ( red, green ,blue, alpha) color space. This function returns a float value from 0-1.

Example:

background-color: alpha(rgba(20,25,35,0.5))

Output:

background-color: 0.5