Less.js Color Channel hsvhue() Function

Last Updated : 27 Sep, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that boosts the functionality of CSS. Cross-browser interoperability is offered via LESS. CSS is improved and compiled for usage by web browsers using a programming language called CSS pre-processor. Additionally, it is a CSS language extension that offers tools like variables, functions, mixins, and operations that enable us to construct dynamic CSS while yet maintaining backward compatibility.

Less.js Color Channel hsvhue() Function is used to extract the hue value of the color object in the HSV color space. It returns a percentage value. It takes values in Hex, RGB, HSL, and HSV format.

Syntax:

hsvhue( value );

Parameters:

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

To know how to compile LESS code into CSS code read this.

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

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="style.css"/> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Less.js Color Channel hsvhue() Function</h3> 
    <div class="container"> 
        <p class="text">Box</p> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: rgb(0, 200, 100); 
@container-bg: rgb(220, 43, 55); 
  
body { 
    background: @body-bg-color; 
} 
  
h3{ 
    color: rgb(0, 200, 100); 
} 
.container{ 
    height:100px;   
    width: 100px;   
    padding: 30px 0px 0px 25px;   
    background-color: (#cc3eff);   
    color:yellow;   
} 
.text{ 
    font-weight: hsvhue(#388bff);   
}

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

body { 
      background: #eeeeee; 
} 
h3 { 
      color: #00c864; 
} 
.container { 
      height: 100px; 
      width: 100px; 
      padding: 30px 0px 0px 25px; 
      background-color: #cc3eff; 
      color: yellow; 
} 
.text { 
      font-weight: 214.97487437; 
}

Output:

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

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="style.css"/> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Less.js Color Channel hsvhue() Function</h3> 
    <div class="container"> 
        <p class="text">Box</p> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: rgb(80, 166, 188); 
@container-bg: rgb(255, 178, 24); 
@cond1: boolean(hsvhue(@text-color) > 100); 
  
body { 
   background: @body-bg-color; 
} 
  
h3{ 
   color: rgb(29, 110, 70); 
} 
.container{ 
   height:100px;     
   width: 150px;   
   padding: 30px 0px 0px 25px;   
   background-color: #6a001e;   
   color:yellow;   
} 
.text{ 
    font-weight: if(@cond1, bold, semi-bold);   
}

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

body { 
      background: #eeeeee; 
} 
h3 { 
      color: #1d6e46; 
} 
.container { 
      height: 100px; 
      width: 150px; 
      padding: 30px 0px 0px 25px; 
      background-color: #6a001e; 
      color: yellow; 
} 
.text { 
      font-weight: bold; 
}