Skip to content

colorSubtract

Subtracts one color from another.

The inverse of colorAdd: removes the second color’s contribution from the first in HSL, pushing the hue away from it and un-averaging saturation and lightness. Taking blue out of magenta leaves red; taking yellow out of orange leaves a redder orange.

import {colorSubtract} from "@d3plus/color";

colorSubtract("#ff00ff", "#0000ff");
colorSubtract("orange", "yellow");
colorSubtract("#1c7ed6", "#2f9e44");

The weights work as in colorAdd, scaling the subtracted terms before they are applied, so a partial weight swings the hue rather than fading: magenta minus a quarter of blue lands on cyan, minus half on green, and only the full weight reaches red.

import {colorSubtract} from "@d3plus/color";

colorSubtract("#ff00ff", "#0000ff", 1, 0.25);
colorSubtract("#ff00ff", "#0000ff", 1, 0.5);
colorSubtract("#ff00ff", "#0000ff", 1, 1);

Parameters

import {colorSubtract} from "@d3plus/color";
c1requiredstring

The base color, a valid CSS color string.

c2requiredstring

The color to remove from the base color, also a valid CSS color string.

o1numberDefault 1

Value from 0 to 1 of the first color's opacity.

o2numberDefault 1

Value from 0 to 1 of the first color's opacity.