About
A shade is a a color function that increases darkness (ie decrease lightness).
You can darken/shade with two methods:
Example
Darken by decreasing lightness with d3
This is not really a shade but to darken a color, yo can just decrease the lightness.
Example with d3-color
function darken(color, k = 0) {
const {h, s, l} = d3.hsl(color);
const newL = l*(1-k/100)
return d3.hsl(h,s,newL);
}
const color = "#0d6efd";
const darkenColor = darken(color, 40).rgb().formatHex()
swatch(color);
swatch(darkenColor);
Shading by mixing with black
With a mixture function, you can create a shade function by mixing with black.
Example with the linear interpolation mixture
let black = "#000000";
let mixture = mix(black,"#0d6efd",40) // #052c65
swatch("#0d6efd");
swatch(mixture);
Inverse
The inverse function is called a tint. It increase lightness (decrease darkness) by adding white or lightness.
Mixture term
No more pure
When a color is shaded, the color is no more pure and is in-between on:
- the greyscale
- and saturation scale