Less.js Color Operation tint() Function

Last Updated : 23 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is better since it makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. CSS must be created and developed using a computer language known as the CSS pre-processor in order for web browsers to use it. It aids with the development of dynamic CSS while simultaneously maintaining backward compatibility and offering features like variables, functions, mixins, and operations. This is an addition to the CSS language.

In this article, we are going to discuss the Color Operation tint() function in Less.js, along with knowing their basic implementation through the illustration.

The tint() function is used to mix a color with white in different proportions and produce a lighter shade of the given color. So it is simply the mix() function but the first color is fixed which is white. The third parameter which is the amount denotes the proportion of the white, i.e., 50% means both are in equal proportions. So this function takes the hex value, RGB value, HSL, or HSV value and it returns a value.

Syntax:

tint(color, weight)

Parameter values:

color: This is the first parameter and it is compulsory and it is the color that will be mixed with white. It can be a hex value, RGB value, HSL, or HSV value.
weight: This parameter is also compulsory and it signifies the proportion of white in the mixture. This parameter takes a value from 0-100% range.

Please refer to the how to pre-compile LESS into CSS article for a detailed description.

Example 1: The below code example demonstrates the usage and implementation of the Color Operation tint() function in Less.js.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>   
    <h3>Less.js Color Operation tint() Function</h3> 
    <div class="c1">   
        <p>tint(rgb(0, 131, 100), 65%) 
          <br>(Tinted Result)<br>#a6d4c9</p>   
    </div> 
</body> 
  
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
  
body { 
    background-color: @body-bg-color; 
} 
.c1 {   
    width: 350px;   
    height: 150px;   
    margin: 1rem; 
    background-color: tint(rgb(0, 131, 100), 65%);   
}   
p {   
    padding: 40px 0px 0px 20px;   
}

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

lessc style.less style.css

The compiled CSS file comes to be:

style.css:

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #a6d4c9; 
} 
p { 
     padding: 40px 0px 0px 20px; 
}

Output:

Example 2: The below code example demonstrates the usage and implementation of the Color Operation tint() function with the if() and boolean logical functions and the color type function.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>   
    <h3>Less.js Color Operation tint() Function</h3> 
    <div class="c1">   
        <p>tint(#ff0000, 60%) 
          <br>(Tinted Result)<br>#ff9999</p>   
    </div> 
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@color: hsl(177, 100%, 39%); 
@second: rgb(58, 21, 11); 
@hex: tint(#ff0000, 60%);  
@cond: boolean(iscolor(@hex)); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: 250px; 
      height: 150px; 
      margin: 1rem; 
      background-color: if(@cond, @hex, @color); 
} 
p { 
      padding: 40px 0px 0px 15px; 
    color: if(@cond, @second, @color); 
}

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:

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #ff9999; 
} 
p { 
    padding: 40px 0px 0px 15px; 
    color: #3a150b; 
}