The color.brighter() function of D3.js is used to make a copy of the color with some extra brightness or darkness in the original color.
Syntax:
color.brighter(k)
Parameter: This function accepts only one parameter k is the amount of brightness required in the original color. It is the Integer value.
Return Values: It returns the object.
Example 1: When the value of k is not given
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>D3.js color.brighter() Function</title> </head> <style> .box { height: 100px; width: 100px; } .box1 { height: 100px; width: 100px; } </style> <body> Color without color.brighter() property <div class="box"></div> Color with color.brighter() property <div class="box1"></div> <!--fetching from CDN of D3.js --> <script type="text/javascript" src= </script> <script> let box = document.querySelector(".box"); let box1 = document.querySelector(".box1"); var color = d3.color("green"); box.style.backgroundColor = `rgb(${color.r},${color.g},${color.b})`; var color = color.brighter(); box1.style.backgroundColor = `rgb(${color.r},${color.g},${color.b})`; </script> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>D3.js color.brighter() Function</title> </head> <style> .box { height: 100px; width: 100px; } .box1 { height: 100px; width: 100px; } </style> <body> Color without color.brighter() property <div class="box"></div> Color with color.brighter(10) property <div class="box1"></div> <!--fetching from CDN of D3.js --> <script type="text/javascript" src= </script> <script> let box = document.querySelector(".box"); let box1 = document.querySelector(".box1"); var color = d3.color("green"); box.style.backgroundColor = `rgb(${color.r},${color.g},${color.b})`; var color = color.brighter(10); box1.style.backgroundColor = `rgb(${color.r},${color.g},${color.b})`; </script> </body> </html> |
Output:
Example 3: When value of k < 0
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>D3.js color.brighter() Function</title> </head> <style> .box { height: 100px; width: 100px; } .box1 { height: 100px; width: 100px; } </style> <body> Color without color.brighter() property <div class="box"></div> Color with color.brighter(-10) property <div class="box1"></div> <!--fetching from CDN of D3.js --> <script type="text/javascript" src= </script> <script> let box = document.querySelector(".box"); let box1 = document.querySelector(".box1"); var color = d3.color("green"); box.style.backgroundColor = `rgb(${color.r},${color.g},${color.b})`; var color = color.brighter(-10); box1.style.backgroundColor = `rgb(${color.r},${color.g},${color.b})`; </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!
