color-kitnext

@pbroom/color-kit/planeQueries

samplePlaneGradient

Samples a two-color gradient and projects each sample onto the plane.

functionimport { samplePlaneGradient } from '@pbroom/color-kit/plane';gradient.ts:55
function samplePlaneGradient(
  planeDefinition: PlaneDefinition,
  query: Omit<PlaneGradientQuery, 'kind'>,
): PlaneGradientResult;

Colors are interpolated in OKLCH along the shorter hue arc (a powerless hue borrows the other endpoint's), endpoints included. Each point carries its sampled color and plane x/y, clamped to the plane window; draw the path with toSvgPath. Works on every plane model.

Parameters

planeDefinitionPlaneDefinition
Plane to project onto; a Plane or any PlaneDefinition.
queryOmit<PlaneGradientQuery, 'kind'>
Endpoints and sample count; see PlaneGradientQuery.

Returns

PlaneGradientResultA new result with one point per sample.

Throws

  • When steps is not a finite integer.

Example

TypeScript
import { parse, toHex } from '@pbroom/color-kit';
import { definePlane, samplePlaneGradient } from '@pbroom/color-kit/plane';

const plane = definePlane({ fixed: { h: 264 } });
const { points } = samplePlaneGradient(plane, {
  from: parse('#1e3a8a'),
  to: parse('#93c5fd'),
  steps: 3,
});
points.map((point) => toHex(point.color)); // → ['#1e3a8a', '#527fc3', '#93c5fd']
points.map((point) => point.x.toFixed(3)); // → ['0.379', '0.594', '0.809']

See also

sense for the fluent form.

Also exported from