Color - Shade (Darken)


A shade is a a color function that increases darkness (ie decrease lightness).

You can darken/shade with two methods:

  • shade: a mixture with the black color.
  • darken: decreasing the lightness directly in a colorspace that supports it as coordinate (ie hsl)


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()

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


The inverse function is called a tint. It increase lightness (decrease darkness) by adding white or lightness.

Mixture term

Shade is a mixture term such as tone, tint and pure hue


No more pure

When a color is shaded, the color is no more pure and is in-between on:

Powered by ComboStrap