Less.js Color Channel luminance() Function

Last Updated : 06 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS benefits from this dynamic style sheet language. Interoperability between browsers is a characteristic of LESS. The CSS pre-processor is a computer language that is used to augment and compile CSS so that web browsers may use it. We can construct dynamic CSS while maintaining backward compatibility because it is an extension of the CSS language with features like variables, functions, mixins, and operations.

In this article, we are going to discuss the Color Channel luminance() function used to extract the luma channel without the gamma correction of the color object. It returns a percentage value(0-100%). It takes values in hex codes, RGB values, HSL values, and HSV values.

Syntax:

luminance(value);

Parameters:

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

Compile LESS code into CSS code using the link.

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Color Channel luminance() Function</h3> 
      
    <div class="container"> 
        <p class="text"> 
            Width of this div:<br>luminance(base Color) 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: rgb(255, 255, 0); 
@container-bg: rgb(0, 200, 100); 
@luma: luminance(@container-bg); 
  
body { 
    background: @body-bg-color; 
} 
  
.container { 
    height: 100px; 
    width: @luma; 
    padding: 30px 0px 0px 95px; 
    background-color: (#cc3eff); 
    color: yellow; 
} 
  
.text { 
    color: @text-color; 
}

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

lessc styles.less styles.css

styles.css: The compiled CSS file is as follows.

styles.css

body { 
    background: #eeeeee; 
} 
  
.container { 
    height: 100px; 
    width: 58.9254902%; 
    padding: 30px 0px 0px 95px; 
    background-color: #cc3eff; 
    color: yellow; 
} 
  
.text { 
    color: #ffff00; 
}

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Color Channel luminance() Function</h3> 
      
    <div class="container"> 
        <p class="text"> 
            Width of this div:<br>luminance(base Color) * 10 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: rgb(255, 255, 0); 
@container-bg: rgb(19, 5, 91); 
@lumi: luminance(@container-bg); 
@cond: boolean(@lumi > 50%); 
  
body { 
    background: @body-bg-color; 
} 
  
.container { 
    height: 100px; 
    width: @lumi * 10; 
    padding: 30px 0px 0px 95px; 
    background-color: If(@cond,  
          @text-color, @container-bg); 
} 
  
.text { 
    color: If(@cond, @container-bg, @text-color); 
}

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

lessc styles.less styles.css

styles.css: The compiled CSS file is as follows:

styles.css

body { 
    background: #eeeeee; 
} 
  
.container { 
    height: 100px; 
    width: 55.62980392%; 
    padding: 30px 0px 0px 95px; 
    background-color: #13055b; 
} 
  
.text { 
    color: #ffff00; 
}