Less.js Color Definition hsla() 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 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 is created and improved using a computer language known as the CSS pre-processor so that web browsers may use it. It also provides tools like variables, functions, mixins, and operations to help with the production of dynamic CSS while keeping backward compatibility. This is an extension to the CSS language.

In this article, we will see the Color Definition hsla() function, which is used to create the opaque color from values for hue, saturation, value, and alpha. This function basically takes hue, saturation, value, and alpha values and returns them in HSLA representation.

Syntax:

hsla(hue, saturation, value, alpha)

Parameter:

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 hsla() 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 hsla() Function</h3> 
      
    <div class="c1"> 
        <p>hsla(90, 100%, 50%, 68%)</p> 
    </div> 
</body> 
  
</html>

style.less

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

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

lessc style.less style.css

The CSS output of the above Less file was compiled into the following CSS file.

style.css

/* styles.less */
body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsla(90, 100%, 50%, 0.68); 
} 
  
p { 
    padding: 50px 0px 0px 45px; 
}

Output:

Example 2: The below code example demonstrates the usage and implementation of the Color Definition hsla() function with the if and boolean logical functions and the is 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 Definition hsla() Function</h3> 
      
    <div class="c1"> 
        <p>hsla(90, 80%, 20%, 0.5)</p> 
    </div> 
</body> 
  
</html>

style.less

@body-bg-color: #eeeeee; 
@color: hsl(150, 100%, 39%); 
@second: rgb(251, 255, 0); 
@hex: hsla(90, 80%, 20%, 0.5); 
@cond1: boolean(iscolor(@hex)); 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: if(@cond1, @second, @color); 
} 
  
p { 
    padding: 50px 0px 0px 40px; 
    color: @hex; 
}

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

lessc styles.less styles.css

The CSS output of the above Less file was compiled into:

style.css

.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #fbff00; 
} 
  
p { 
    padding: 50px 0px 0px 40px; 
    color: hsla(90, 80%, 20%, 0.5); 
}