@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.

functionimport { sampleSliderGradient } from '@pbroom/color-kit/driver';slider-gradient.ts:374
function 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

SliderGradientStop[]

Throws

  • When steps is non-finite or below 2.

Example

TypeScript
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)'

See also