Less.js Color Channel Functions

Last Updated : 11 Oct, 2022

In this article, we will take a look at various Color Channel functions provided by Less.js.

Less (Leaner Style Sheets) is an extension to normal CSS, which basically enhances the abilities of normal CSS and gives it superpowers. Color Channel functions are built in Less.js to basically extract a color channel, like hue, saturation, etc, from a color object and return the output to the user.

There are 12 Color Channel functions in Less.js which are as follows:

1. hue: This function is used to extract the hue channel from a color object in the HSL color space. It returns an integer value between 0 to 360 as the output.

Syntax:

hue(color)

Parameter:

color: A color object in HSL color space. For example: HSL (130, 70%, 50%)

2. saturation: This function is used to extract a saturation channel from a color object in the HSL color space. Returns a percentage value between 0 to 100.

Syntax:

saturation(color)

Parameter:

color: A color object in HSL color space. For example, HSL (130, 70%, 50%)

3. lightness: This function is used to extract the lightness channel from a color object in the HSL color space. Returns a percentage value between 0 to 100 as the output.

Syntax:

lightness(color)

Parameter:

color: A color object in HSL color space. For example, HSL (130, 70%, 50%)

4. hsvhue: This function is used to extract the hue channel from a color object in the HSV color space. Returns an integer value between 0 to 360 as the output.

Syntax:

hsvhue(color)

Parameter:

color: A color object in HSV color space. For example, HSV(130, 70%, 50%)

5. hsvsaturation: This function is used to extract saturation channels from a color object in the HSV color space. It returns a percentage value between 0 to 100 as the output.

Syntax:

hsvsaturation(color)

Parameter:

color: A color object in HSV color space. For example: HSV (130, 70%, 50%)

6. hsvvalue: This function is used to extract the value channel from a color object in the HSV color space. It returns a percentage value between 0 to 100 as the output.

Syntax:

hsvvalue(color)

Parameter:

color: A color object in HSV color space. For example, HSV (130, 70%, 50%)

7. red: This function is used to extract a red channel from a color object. Returns a floating point value between 0 to 255 as the output.

Syntax:

red(color)

Parameter:

color: A color object, for example, RGB(13, 13, 13)

8. green: This function is used to extract a green channel from a color object. Returns a floating point value between 0 to 255 as the output.

Syntax:

green(color)

Parameter:

color: A color object. For example, RGB(13, 13, 13)

9. blue: This function is used to extract a blue channel from a color object. Returns a floating point value between 0 to 255 as the output.

Syntax:

blue(color)

Parameter:

color: A color object. For example, RGB(13, 13, 13)

10. alpha: This function is used to extract the alpha channel from a color object. It returns a floating point value between 0 to 1 as the output.

Syntax:

alpha(color)

Parameter:

color: A color object. For example, RGBA(13, 13, 13, 0.3)

11. luma: This function is used to extract luma (or perceptual brightness), with gamma correction applied, from a color object. Returns a percentage value between 0-100 as the output.

Syntax:

luma(color)

Parameter:

color: A color object. For example, RGB(13, 13, 13)

12. luminance: This function is used to extract the value of luma without gamma correction from a color object. It returns a percentage value between 0-100 as the output.

Syntax:

luminance(color)

Parameter:

color: A color object. For example, RGB(13, 13, 13)

Example 1: In this example, we have the main color (@main) which is in HSL format and we form 3 different colors (@color1, @color2, @color3) using the hue, saturation, and lightness of the main color and then apply it in the HTML code.

index.html

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>GeeksForGeeks | Color Channel Functions in Less.js</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h3>Color Channel Functions in Less.js</h3> 
  
    <div class="main">Main color</div> 
    <div class="color1">Color1</div> 
    <div class="color2">Color2</div> 
    <div class="color3">Color3</div> 
</body> 
</html>

styles.less

@main: hsl(100, 50%, 70%); 
  
@hue: hue(@main); 
@saturation: saturation(@main); 
@lightness: lightness(@main); 
  
@color1: hsl(@hue, 10%, 90%); 
@color2: hsl(30, @saturation, @lightness); 
@color3: hsl(200, @saturation, 40%); 
  
body 
{ 
    font-family: sans-serif; 
} 
.main 
{ 
    color: @main; 
} 
.color1
{ 
    color: @color1; 
} 
.color2
{ 
    color: @color2; 
} 
  
.color3
{ 
    color: @color3; 
}

Syntax: To compile the above LESS code into normal CSS, run the following command in the terminal.

lessc styles.less styles.css

styles.css

body { 
    font-family: sans-serif; 
} 
.main { 
    color: hsl(100, 50%, 70%); 
} 
.color1 { 
    color: hsl(100, 10%, 90%); 
} 
.color2 { 
    color: hsl(30, 50%, 70%); 
} 
.color3 { 
    color: hsl(200, 50%, 40%); 
} 

Output:

the output of color channel functions in less.js example 1

Example 2: In this example, we have an original color (@original) and we convert it to RGB value using the built-in rgb() function and name it @rgb_original. We defined three classes with the CSS background-color equal to “red”, “green” and “blue” respectively (@bg1, @bg2, @bg3).

index.html

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>GeeksForGeeks | Color Channel Functions in Less.js</title> 
    <link rel="stylesheet" href="/styles.css"> 
</head> 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h3>Color Channel Functions in Less.js</h3> 
  
    <div class="original">Original color</div> 
    <div class="bg1">Background Color1</div> 
    <div class="bg2">Background Color2</div> 
    <div class="bg3">Background Color3</div> 
</body> 
</html>

styles.less

@original: springgreen; 
@rgb_original: rgb(@original); 
  
@bg1: rgb(red(@rgb_original), 0, 0); 
@bg2: rgb(0, green(@rgb_original), 0); 
@bg3: rgb(0, 0, blue(@rgb_original)); 
  
.original{ 
    background-color: @original; 
} 
  
.bg1
{ 
    background-color: @bg1; 
    color: white; 
} 
  
.bg2{ 
    background-color: @bg2; 
} 
  
.bg3{ 
    background-color: @bg3; 
}

Syntax: To compile the above LESS code, run the following command.

lessc styles.less styles.css

styles.css

.original  
{ 
    background-color: springgreen; 
} 
.bg1
{ 
    background-color: #000000; 
    color: white; 
} 
.bg2 
{ 
    background-color: #00ff00; 
} 
.bg3 
{ 
    background-color: #00007f; 
} 