color-kitnext

@pbroom/color-kit/reactPlane geometry

useChromaBand

Samples the plane color's chroma as a line across lightness, kept inside the gamut: the tonal strip the current chroma traces for its hue.

functionimport { useChromaBand } from '@pbroom/color-kit/react';use-chroma-band.ts:99
function useChromaBand(
  plane: ColorPlaneSpec,
  options?: UseChromaBandOptions,
): ColorPlaneLineGeometry;

Returns geometry only; draw path as a stroked <path> over the plane. Samples only when the axes are lightness and chroma (in either order); other planes return empty geometry. Computed synchronously at rest and in a shared Web Worker while isDragging (when workers are available).

Parameters

planeColorPlaneSpec
Color and axes of the plane; the color supplies the chroma, lightness and alpha the band follows.
options?UseChromaBandOptionsdefault {}
See UseChromaBandOptions.

Returns

ColorPlaneLineGeometryMemoized ColorPlaneLineGeometry.

Throws

  • When both axes use the same channel.
  • When gamut is not 'srgb' or 'display-p3'.

Example

TSX
import { useChromaBand } from '@pbroom/color-kit/react';
import type { Color } from '@pbroom/color-kit';

export function TonalStrip({ color }: { color: Color }) {
  const band = useChromaBand({ color }, { mode: 'proportional', gamut: 'display-p3' });
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d={band.path} fill="none" stroke="#fff" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

See also

useGamutBoundary