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

## 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...
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...
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...
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...
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: , , . ...
Color Tint (lighten)

A tint is a mixture of a color with white, which increases lightness.
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,...
Datacadamia - Data all the things

Computer science from a data perspective