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!
