Fabric.js sourceFromHsl() Method
Last Updated :
19 Mar, 2021
The sourceFromHsl() method is used to return an array representation of color for the specified color values in HSL (Hue-saturation-lightness) or HSLA (Hue-saturation-lightness-alpha) format.
Syntax:
sourceFromHsl(color)
Parameters: This method accepts a parameter as mentioned above and described below:
- color: This parameter holds the specified color values in HSL or HSLA format.
Return Value: This method returns an array representation of values in RGBA (Red Green Blue and Alpha) format of the color for the specified color values in HSL or HSLA format.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<script type="text/javascript">
// Calling the sourceFromHsl() function over
// the color value in HSL and HSLA format
console.log(fabric.Color.sourceFromHsl("hsl(0, 100%, 50%)"));
console.log(fabric.Color.sourceFromHsl("hsla(0, 100%, 50%, 0.6)"));
</script>
</body>
</html>
|
Output:
[255,0,0,1]
[255,0,0,0.6]
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<script type="text/javascript">
// Initializing some color values in HSL format
var A = "hsl(0, 100%, 50%)";
var B = "hsl(0, 0%, 50%)";
// Initializing some color values in HSLA format
var C = "hsla(0, 100%, 50%, 0.9)";
var D = "hsla(0, 0%, 50%, 0.2)";
// Calling the sourceFromHsl() function over
// the above color values
console.log(fabric.Color.sourceFromHsl(A));
console.log(fabric.Color.sourceFromHsl(B));
console.log(fabric.Color.sourceFromHsl(C));
console.log(fabric.Color.sourceFromHsl(D));
</script>
</body>
</html>
|
Output:
[255,0,0,1]
[128,128,128,1]
[255,0,0,0.9]
[128,128,128,0.2]
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...