Less.js Color Channel lightness() Function

Last Updated : 27 Sep, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that makes CSS more powerful. LESS provides cross-browser compatibility. A programming language called CSS pre-processor is used to enhance CSS and compile it for use by web browsers. In addition, it is a language extension for CSS that provides capabilities like variables, functions, mixins, and operations that let us create dynamic CSS while yet preserving backward compatibility.

Less.js Color Channel lightness() function is used to extract the lightness value of the color object in the HSL color space. It returns a percentage value. It takes values in hex codes, RGB values, and HSL values

Syntax:

lightness(condition);

Parameters:

value: This is the parameter that is compulsory for the lightness function. It takes values in hex codes, RGB values, and HSL values.

compile LESS code into CSS code using the link.

Example 1: The code below demonstrates the usage and implementation of the Color Channel lightness() function.

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Color Channel lightness() Function</b></h3> 
    <div class="container"> 
    </div> 
</body> 
  
</html> 

styles.less

@body-bg-color: #eeeeee; 
@text-color: rgb(0, 200, 100); 
@container-bg: rgb(220, 43, 55); 
  
body  
{ 
    background: @body-bg-color; 
} 
  
.container 
{ 
    height:100px;     
    width:lightness(rgb(77, 168, 54));   
    padding: 30px 0px 0px 25px;   
    background-color: (#cc3eff);   
    color:yellow;   
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

The compiled CSS file comes to be:

style.css

body  
{ 
   background: #eeeeee; 
} 
.container  
{ 
    height: 100px; 
    width: 43.52941176%; 
    padding: 30px 0px 0px 25px; 
    background-color: #cc3eff; 
    color: yellow; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Color Channel lightness() function with the if and boolean logical functions.

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Color Channel lightness() Function</b></h3> 
    <div class="container"> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: rgb(80, 188, 134); 
@container-bg: rgb(255, 178, 24); 
@cond1: boolean(lightness(@text-color) < 50%); 
  
body { 
    background: @body-bg-color; 
} 
  
.container{ 
    height:100px;     
    width:lightness(rgb(100, 157, 86));   
    padding: 30px 0px 0px 25px;   
    background-color: if(@cond1, @container-bg, @text-color);   
    color:yellow;   
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

The compiled CSS file comes to be:

sytle.css

body { 
    background: #eeeeee; 
} 
.container { 
    height: 100px; 
    width: 47.64705882%; 
    padding: 30px 0px 0px 25px; 
    background-color: #50bc86; 
    color: yellow; 
}