Less.js Color Operation lighten() Function

Last Updated : 11 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS uses a dynamic style sheet language, it is more advantageous. LESS is adaptable enough to function in a variety of browsers. A computer language called the CSS pre-processor is used to build and enhance CSS so that web browsers may use it. It is also a language extension for CSS that offers resources like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while maintaining backward compatibility.

In this article, we are going to discuss the Color Operation lighten() function is used to increase the lightness channel of a color object. It returns a positive decimal value (0-1). It takes values in hex codes, RGB values, HSL values, and HSV values.

Syntax:

lighten(value, amount);

Parameters:

value: This is the parameter that is compulsory for the lighten function. It takes values in hex codes, RGB values, HSL values, and HSV values.
amount: This parameter is also compulsory and this parameter is used to specify the amount of light you want to add.

Compile LESS code into CSS code using the link.

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" href="styles.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Color Operation lighten() Function</b></h3> 
    <div class="box"> 
        <div class="container1"> 
            <p class="text"> 
                Base Color<br>hsl(60, 50%, 52%) 
            </p> 
        </div> 
        <div class="container2"> 
            <p class="text"> 
                Lightened Color<br>hsl(60, 50%, 72%) 
            </p> 
        </div> 
    </div> 
</body> 
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@text-color: hsl(250, 90%, 19%); 
@container-bg: hsl(60, 50%, 52%); 
@color: lighten(@container-bg, 20%); 
  
body { 
    background: @body-bg-color; 
} 
  
.box { 
    display: flex; 
  
} 
  
.container1 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: @container-bg; 
    margin-right: 2rem; 
} 
  
.container2 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: @color; 
} 
  
.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:

CSS

body { 
    background: #eeeeee; 
} 
  
.box { 
    display: flex; 
} 
  
.container1 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: hsl(60, 50%, 52%); 
    margin-right: 2rem; 
} 
  
.container2 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: hsl(60, 50%, 72%); 
} 
  
.text { 
    color: hsl(250, 90%, 19%); 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Color Operation lighten() 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><b>Less.js Color Operation lighten() Function</b></h3> 
    <div class="box"> 
        <div class="container1"> 
            <p class="text"> 
                Base Color<br>hsl(230, 50%, 52%) 
            </p> 
        </div> 
        <div class="container2"> 
            <p class="text"> 
                Lightened Color<br>hsl(230, 50%, 72%) 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>

styles.less

CSS

@body-bg-color: #eeeeee; 
@text-color: hsl(62, 49%, 72%); 
@container-bg: hsl(230, 50%, 52%); 
@color: lighten(@container-bg, 20%); 
@cond: boolean(lightness(@color) > 60%); 
  
body { 
    background: @body-bg-color; 
} 
  
.box { 
    display: flex; 
  
} 
  
.container1 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: if(@cond,  
          @container-bg, @color); 
    margin-right: 2rem; 
} 
  
.container2 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: if(@cond,  
          @color, @container-bg); 
} 
  
.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.

CSS

body { 
    background: #eeeeee; 
} 
  
.box { 
    display: flex; 
} 
  
.container1 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: hsl(230, 50%, 52%); 
    margin-right: 2rem; 
} 
  
.container2 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: hsl(230, 50%, 72%); 
} 
  
.text { 
    color: hsl(62, 49%, 72%); 
}