d3.InterpolateRgb() Function is used to interpolate the two colors and return the interpolator between them with a gamma value that is adjustable.
Syntax:
d3.interpolateRgb(a, b)
Parameters: It takes the two parameters.
- a: It is a color.
- b: It is a color.
Returns: It returns the Interpolator function.
Below given are a few Examples of d3.interpolateRgb() function.
Example 1: Printing color in the console.
<!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" src = </ script > < script > console.log("Type of the function is: ", typeof(d3.interpolateRgb("Red", "blue"))); console.log(d3.interpolateRgb("Red", "blue")(0.2)); console.log(d3.interpolateRgb("Red", "green")(0.2)) </ script > </ body > </ html > |
Output:
Example 2: Displaying color in HTML
<!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 > .b1, .b2{ width: 100px; height: 100px; } </ style > < body > < div class = "b1" > </ div > < div class = "b2" > </ div > <!--fetching from CDN of D3.js --> < script type = "text/javascript" </ script > < script > let color=d3.interpolateRgb( "white", "green")(0.2); let color2=d3.interpolateRgb( "blue", "green")(0.8); let b1=document.querySelector(".b1"); let b2=document.querySelector(".b2"); b1.style.backgroundColor=color; b2.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!