The color.darker() function of D3.js is used to make a copy of the color with some extra darkness or brightness in the original color.
Syntax:
color.darker(k)
Parameter: It takes the following parameters:
- k: Here âkâ is the amount of darkness 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
<!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>   .originalColor{     height: 100px;     width: 100px;   }   .darkerColor{     height: 100px;     width: 100px;   } </style> <body>   Color without color.darker() property   <div class="originalColor">     </div>   Color with color.darker() property   <div class="darkerColor">     </div>   <!--fetching from CDN of D3.js -->  <script type = "text/javascript"   </script>   <script>     let originalColor=            document.querySelector(".originalColor");     let darkerColor=            document.querySelector(".darkerColor");       var color= d3.color("green");     originalColor.style.backgroundColor=            `rgb(${color.r}, ${color.g}, ${color.b})`;     var color=color.darker()     darkerColor.style.backgroundColor=           `rgb(${color.r}, ${color.g}, ${color.b})`;   </script> </body> </html> |
Output:
Example 2:
When the value of k > 0
<!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>   .originalColor{     height: 100px;     width: 100px;   }   .darkerColor{     height: 100px;     width: 100px;   } </style> <body>   Color without color.darker() property   <div class="originalColor">     </div>   Color with color.darker(2) property   <div class="darkerColor">     </div>   <!--fetching from CDN of D3.js -->  <script type = "text/javascript"   </script>   <script>     let originalColor= document.querySelector(".originalColor");     let darkerColor= document.querySelector(".darkerColor");     var color= d3.color("green");     originalColor.style.backgroundColor= `rgb(${color.r}, ${color.g}, ${color.b})`;     var color=color.darker(2)     darkerColor.style.backgroundColor= `rgb(${color.r}, ${color.g}, ${color.b})`;   </script> </body> </html> |
Output:
Example 3:
When value of k<0
<!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>   .originalColor{     height: 100px;     width: 100px;   }   .darkerColor{     height: 100px;     width: 100px;   } </style> <body>   Color without color.darker() property   <div class="originalColor">     </div>   Color with color.darker(-2) property   <div class="darkerColor">     </div>   <!--fetching from CDN of D3.js -->  <script type = "text/javascript"   </script>   <script>     let originalColor= document.querySelector(".originalColor");     let darkerColor= document.querySelector(".darkerColor");     var color= d3.color("green");     originalColor.style.backgroundColor= `rgb(${color.r}, ${color.g}, ${color.b})`;     var color=color.darker(-2)     darkerColor.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!
