color-kitnext

@pbroom/color-kit/reactPlane geometry

useGamutBoundary

Traces the gamut boundary (the maximum in-gamut chroma at each lightness) for one hue, as points and SVG path data in plane coordinates.

functionimport { useGamutBoundary } from '@pbroom/color-kit/react';use-gamut-boundary.ts:112
function useGamutBoundary(
  plane: ColorPlaneSpec,
  options?: UseGamutBoundaryOptions,
): ColorPlaneLineGeometry;

Returns geometry only; draw path however you like, typically as a stroked <path> in an SVG over a useColorPlaneRenderer canvas. Traces only when the axes are lightness and chroma (in either order); other planes return empty geometry. The boundary follows the plane color's hue unless hue is set. It is computed synchronously at rest and in a shared Web Worker while isDragging (when workers are available).

Parameters

planeColorPlaneSpec
Color and axes of the plane.
options?UseGamutBoundaryOptionsdefault {}
See UseGamutBoundaryOptions.

Returns

ColorPlaneLineGeometryMemoized ColorPlaneLineGeometry.

Throws

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

Example

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

export function GamutEdges({ color }: { color: Color }) {
  const srgb = useGamutBoundary({ color }, { gamut: 'srgb' });
  const p3 = useGamutBoundary({ color }, { gamut: 'display-p3' });
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d={srgb.path} fill="none" stroke="#fff" strokeDasharray="4 3" vectorEffect="non-scaling-stroke" />
      <path d={p3.path} fill="none" stroke="#fff" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

See also

useChromaBand