D3.js lch() Function

Last Updated : 06 Jan, 2022

The d3.lch() function in D3.js is used to construct a new LCH color and returns l, c and h properties of the specified color taken as the parameter of the function.

Syntax:

d3.lch(color);

Parameters: This function accepts single parameter color which is used to specify the CSS color.

Return Value: This function returns l, c and h properties of the specified CSS color taken as the parameter of the function.

Below programs illustrate the d3.lch() function in D3.js:

Example 1:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <script src=
        "https://d3js.org/d3.v4.min.js">
    </script>
    <script src=
        "https://d3js.org/d3-color.v1.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 style="color:green;">GeeksForGeeks</h1>
 
        <h3>D3.js | d3.lch() Function</h3>
        <script>
 
            // Calling the d3.lch() function
            // function with some parameters 
            var color1 = d3.lch("red");
            var color2 = d3.lch("green");
            var color3 = d3.lch("blue");
 
            // Getting the lch properties 
            console.log(color1);
            console.log(color2);
            console.log(color3); 
        </script>
    </center>
</body>
 
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <script src=
        "https://d3js.org/d3.v4.min.js">
    </script>
    <script src=
        "https://d3js.org/d3-color.v1.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 style="color:green;">GeeksForGeeks</h1>
 
        <h3>D3.js | d3.lch() Function</h3>
        <script>
 
            // Calling the d3.lch() function
            // function with some parameters 
            var color = d3.lch();
 
            // Getting the LCH properties 
            console.log(color); 
        </script>
    </center>
</body>
 
</html>