colorLighter
Similar to d3.color.brighter, except that this also reduces saturation so that colors don’t appear neon.
Basic example
Section titled “Basic example”Lightens a color by moving its HSL lightness halfway toward white while taking the same amount off its saturation, so the result reads as a tint rather than the neon that plain brightening produces. Charts use it for hover states and the lighter second ring of the categorical palette.
import {colorLighter} from "@d3plus/color";
colorLighter("#1c7ed6");
colorLighter("#c92a2a");
colorLighter("#2f9e44");
Strength
Section titled “Strength”The second argument sets how far toward white to go, from 0 (unchanged) to 1 (white). It is scaled by the room the color has left, so a strength of 0.5 always lands halfway between the color and white.
import {colorLighter} from "@d3plus/color";
colorLighter("#1c7ed6", 0.25);
colorLighter("#1c7ed6", 0.5);
colorLighter("#1c7ed6", 0.75);
colorLighter("#1c7ed6", 1);
Parameters
import {colorLighter} from "@d3plus/color";