Color - Shade (Darken)

About

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)

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

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

  1)

No more pure

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


Powered by ComboStrap