Less.js Color Definition hsva() Function

Last Updated : 28 Sep, 2022

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

In this article, we will see the Color Definition hsva() function, which is used to create the transparent color from values for hue, saturation, value, and alpha. Its specifications are as follows:

hue: a number that ranges from 0 to 360
saturation: It comprises a value between 0 and 1 or a percentage between 0 and 100%.
value: It consists of a 0 to 1 or a 0 to 100% figure or percentage.
alpha: It consists of a 0 to 1 or a 0 to 100% figure or percentage.

This function basically takes hue, saturation, value, and alpha values and returns them in RGB representation.

Syntax:

hsva(hue, saturation, value, alpha)

Parameter values:

hue: This is the first parameter and it is usually a number that ranges from 0 to 360
saturation: This is the second parameter and it is usually a value between 0 and 1 or a percentage between 0 and 100%.
value: This is the third parameter and it is usually a 0 to 1 or a 0 to 100% figure or percentage.
alpha: This is the fourth parameter and it is usually a 0 to 1 or a 0 to 100% figure or percentage.

Return Type: It returns the different colors with their values.

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 Definition hsva() 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 Definition hsva() Function</h3> 
    <div class="c1">   
        <p>hsva(90, 100%, 50%, 68%)<br> 
           (RGBA Value)<br>rgba(64, 128, 0, 0.68)</p>   
    </div> 
</body> 
  
</html>

style.less: This is compiled into a CSS file which is given below.

style.less

@body-bg-color: #eeeeee; 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsva(90, 100%, 50%, 68%); 
} 
  
p { 
    padding: 50px 0px 0px 45px; 
}

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

lessc styles.less styles.css

style.css: The CSS output of the above Less file was compiled:

style.css

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: rgba(64, 128, 0, 0.68); 
} 
  
p { 
    padding: 50px 0px 0px 45px; 
} 

Output:

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