The d3.hsl() function in D3.js is used to construct a new HSL color and returns HSL properties of the specified color taken as the parameter of the function.
Syntax:
d3.hsl(h, s, l, opacity)
or
d3.hsl(color)
Parameters: This function accepts some parameters as mentioned above and described below:
- h: It is used to set the hue value.
- s: It is used to set the saturation value.
- l: It is used to set the lightness value.
- opacity: It is used to set the opacity/transparency.
- color: It is used to set the color name or hex code.
Return Value: This function returns HSL properties of the specified CSS color taken as the parameter of the function.
Below programs illustrate the d3.hsl() function in D3.js:
Example 1:
javascript
<!DOCTYPE html><html> <head> <title> D3.js | d3.hsl() Function </title> <script src= </script></head><body> <script> // Calling the d3.hsl() function // with some parameters var color1 = d3.hsl("red"); var color2 = d3.hsl("green"); var color3 = d3.hsl("blue"); // Getting the HSL properties console.log(color1); console.log(color2); console.log(color3); </script></body></html> |
Output:
{"h":0, "s":1, "l":0.5, "opacity":1}
{"h":120, "s":1, "l":0.25098039215686274, "opacity":1}
{"h":240, "s":1, "l":0.5, "opacity":1}
Example 2:
javascript
<!DOCTYPE html><html> <head> <title> D3.js | d3.hsl() Function </title> <script src= </script></head><body> <script> // Calling the d3.hsl() function // without any parameters var color = d3.hsl(); // Getting the HSL values console.log(color); </script></body></html> |
Output:
{"h":null, "s":null, "l":null, "opacity":1}
Ref: https://devdocs.io/d3~5/d3-color#hsl
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!