D3.js interpolateHclLong() function
Last Updated :
24 Jul, 2020
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>
<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>
<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:
Share your thoughts in the comments
Please Login to comment...