Open In App

Fabric.js toHsl() Method

The toHsl() method is used to convert any type of the specified color representation to it’s HSL (hue, saturation, and lightness) representation.

Syntax:



toHsl()

Parameters: This method does not accept any parameter.

Return Value: This method returns color representation in HSL format.



Example 1:




<!DOCTYPE html>
<html>
  
<head>
  <!-- Adding the FabricJS library -->
  <script src=
  </script>
</head>
  
<body>
<script type="text/javascript">
  
 // Calling the toHsl() function over 
 // the specified color values
 console.log(new fabric.Color("rgb(10, 120, 150)").toHsl());
 console.log(new fabric.Color("hex(0A7000FF)").toHsl());
</script>
  
</body>
  
</html>

Output:

hsl(193,88%,31%)
hsl(0,0%,0%)

Example 2:




<!DOCTYPE html>
<html>
  
<head>
  <!-- Adding the FabricJS library -->
  <script src=
  </script>
</head>
  
<body>
<script type="text/javascript">
  
 // Initializing some color values in different color format
 var A = "rgb(0, 12, 50)";
 var B = "rgba(10, 13, 250, 0.1)";
 var C = "hex(ff0000)";
  
 // Calling the toHsl() function over 
 // the above specified color values
 console.log(new fabric.Color(A).toHsl());
 console.log(new fabric.Color(B).toHsl());
 console.log(new fabric.Color(C).toHsl());
</script>
  
</body>
  
</html>

Output:

hsl(226,100%,10%)
hsl(239,96%,51%)
hsl(0,0%,0%)

Article Tags :