The d3.interpolateHclLong() function in D3.js is used to return the CIELChab color space interpolator function between two colors. It is almost the same as interpolateHcl() function but the only difference between the two is that it does not use the shortest path between hues.
Syntax:
d3.interpolateHclLong(a, b);
Parameters: It takes the following two parameters.
- a: It is the color string.
- b: It is the color string. It’s amount of mixing with the first color is decided by interpolateHclLong(0<=x<=1)
Note: If x=1 than one part of b ad 0 part of a is returned color. Change the value of x and see different shades of colors.
Returns: Below given are a few examples of the above function.
Example 1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> </style> <body> <!--fetching from CDN of D3.js --> <script type = "text/javascript" </script> <script> // Printing the return type of the function console.log("function type is: ", typeof(d3.interpolateHclLong("blue", "white"))) // Using function d3.interpolateHclLong() console.log("A RGB string: ", d3.interpolateHclLong("blue", "white")(0.5)) console.log("A RGB string", d3.interpolateHclLong("blue", "white")(0.2)) </script> </body> </html> |
Output:
Example 2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .box1, .box2{ display: flex; margin-right: 40px; border-radius: 20% 20%; border: 2px solid black; width: 150px; height: 150px; } div{ display: flex; } </style> <body> D3.interpolateHclLong() <div> <div class="box1"> </div> <div class="box2"> </div> </div> <!--fetching from CDN of D3.js --> <script type = "text/javascript" </script> <script> let box1=document.querySelector(".box1"); let box2=document.querySelector(".box2"); let color=d3.interpolateHclLong("green", "white")(0.5); let color2=d3.interpolateHclLong("green", "white")(0.2); // Changing css of the div with class-name box1 box1.style.backgroundColor=color; // Changing css of the div with class-name box2 box2.style.backgroundColor=color2; </script> </body> </html> |
Output:
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!
