color-kitnext

@pbroom/color-kit/reactPlane geometry

useFallbackPoints

Positions of the plane color after gamut mapping into sRGB and into Display P3, e.g. to mark where an out-of-gamut pick will actually render.

functionimport { useFallbackPoints } from '@pbroom/color-kit/react';use-fallback-points.ts:49
function useFallbackPoints(
  plane: ColorPlaneSpec,
): ColorPlaneFallbackPoints;

Each point carries the mapped color and its normalized x/y (y down) on the plane; for an in-gamut color both coincide with the color's own position. Memoized on the color and axes.

Parameters

planeColorPlaneSpec
Color and axes of the plane.

Returns

ColorPlaneFallbackPointsThe sRGB and Display P3 ColorAreaFallbackPoints.

Throws

  • When both axes use the same channel.

Example

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

export function SrgbMarker({ color }: { color: Color }) {
  const { srgb } = useFallbackPoints({ color });
  return (
    <span
      style={{
        position: 'absolute',
        left: `${srgb.x * 100}%`,
        top: `${srgb.y * 100}%`,
        background: toHex(srgb.color),
      }}
    />
  );
}