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!
