@pbroom/color-kit/driverSlider gradient
sampleSliderGradient
Samples steps + 1 evenly spaced stops across range for one channel of a color model, for painting a slider track.
import { sampleSliderGradient } from '@pbroom/color-kit/driver';slider-gradient.ts:374function sampleSliderGradient(
options: SampleSliderGradientOptions,
): SliderGradientStop[];Each stop holds baseColor with channel set to the stop's value. For a hue channel in the default 'static' hue mode, baseColor is ignored and each stop is the most saturated color for that hue instead: the OKLCH cusp in colorSpace ('oklch'), s 100 / l 50 ('hsl'), s 100 / v 100 ('hsv') or the HCT peak-chroma tone ('hct'), always at alpha 1. Each sampled color is then gamut-mapped twice: into colorSpace (activeColor, activeCss) and into sRGB (srgbColor, srgbCss).
Parameters
Returns
Throws
- When
stepsis non-finite or below 2.
Example
import { sampleSliderGradient } from '@pbroom/color-kit/driver';
const stops = sampleSliderGradient({
model: 'oklch',
channel: 'l',
baseColor: { l: 0.7, c: 0.15, h: 30, alpha: 1 },
range: [0, 1],
steps: 4,
});
stops.map((stop) => stop.value); // → [0, 0.25, 0.5, 0.75, 1]
stops[2].srgbCss; // → 'rgb(168 55 42)'
stops[2].activeCss; // → 'color(display-p3 0.608 0.249 0.1917)'