Color - Shade (Darken)

Monet Femme Ombrelle 1886 Logo


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

Shade Vs Tint Vs Tone Pure Hue Tint Tone Shade 1)

No more pure

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

Discover More
Bootstrap - Why the primary color for an alert is not the same than for a button ?

This page explains why the primary color for an alert is not the same than for a button in Bootstrap and how to calculate the derived alert colors. huemonochromatic color scheme bootstrap uses a color...
Color - (Lightness|Value|Tone) (White, Gray, Black scale)

Lightness, also known as value or tone, is a property (coordinate) placed on a linear scale where: White is the highest possible value (the lightest) Black is the lowest value (the darkest) Gray...
Monet Femme Ombrelle 1886 Logo
Color - Mixture / Composite (Mix / Blend)

Color mixtures are a mixture of two colors. There is a lot of way to mix (or blend) two colors. The most known is the addition of primary color that creates composite colors (secondary, ..) located at...
Pure Hue Tint Tone Shade
Color - Pure Hue (Pure Color)

A hue is called pure without: any white, black, grey (no lightness) or complementary in it. The degree of purity of a hue is defined by the color intensity property. This is known as a natural value...
Subtractive Color Wheel
Color - RYB (Red, Yellow, Blue) color model

RYB (Red, Yellow, Blue) is a physical colorspace based on the subtractive property of the color where red, yellow, and blue are the primary colors used to create other colors. With white and black...
Monochromatic Landing
Color Theme / Scheme

A color theme / scheme is a combination of colors used in an application design. They are palette but formed from only a couple of colors. The main types of color schemes are: , , . ...
Pure Hue Tint Tone Shade
Color Tint (lighten)

A tint is a mixture of a color with white, which increases lightness.
Pure Hue Tint Tone Shade
Colore - Tone

A tone is produced either: by mixing a color with gray, or by both tinting and shading In either case, they affect the ligthness and saturation but not the hue This is a mixture term such as tint,...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective

Share this page:
Follow us:
Task Runner