<!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
>
<
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
>