colorRampDark
Builds an n-step single-hue ramp for a dark background: from a deep,
low-chroma tint of the base just above the background up to the bright base
color, stepped evenly in OKLab. Low values recede into the background and
high values glow, the mirror of colorRamp on a light background.
Returned dimmest→brightest (low→high), so it swaps in for colorRamp
wherever a ramp maps low values to its first step. The brightest step is
the base color itself for a continuous ramp.
Basic example
Section titled “Basic example”Builds a six-step ramp from each of three bright base hues on a dark background, returned dimmest to brightest with the base color itself as the final step. The dim end is a low-chroma tint just above the background, so the lowest step still reads as a mark.
import {colorRampDark} from "@d3plus/color";
colorRampDark("#4dabf7", 6, {background: "#212529"});
colorRampDark("#69db7c", 6, {background: "#212529"});
colorRampDark("#ff6b6b", 6, {background: "#212529"});
Ordinal ramp
Section titled “Ordinal ramp”With {ordinal: true} the dim end is lifted further off the background and keeps more chroma, so every step reads as a distinct mark: the ramp for ordered discrete categories on a dark surface.
import {colorRampDark} from "@d3plus/color";
colorRampDark("#4dabf7", 5, {background: "#212529", ordinal: true});
colorRampDark("#69db7c", 5, {background: "#212529", ordinal: true});
colorRampDark("#ff6b6b", 5, {background: "#212529", ordinal: true});
Parameters
import {colorRampDark} from "@d3plus/color";