@pbroom/color-kit/plane

@pbroom/color-kit/plane turns color questions into geometry. A plane fixes every channel of a color model but two and maps those two to normalized x and y. Queries against it return points and paths you can draw, hit-test or cache. It powers the React plane hooks' overlays, but nothing in it depends on a UI.

Domains

• Definition and mapping. definePlane and definePlaneFromColor resolve axes, ranges and fixed channels for oklch, oklab, rgb, hsl, hsv, hct or display-p3. planeToColor and colorToPlane project between the two. planeHue reports a plane's hue in OKLCH, converting the fixed color on hsl, hsv and hct planes.
• Queries. sense binds gamutRegion, gamutBoundary, contrastRegion, contrastBoundary, chromaBand, fallbackPoint and gradient to a plane; runPlaneQuery and runPlaneQueries take the same queries as data.
• Output and caching. toSvgPath and toSvgCompoundPath write SVG path data; PlaneQueryCache memoizes results.
• Regions. containsPoint and nearestPointOnPath test geometry; unionRegions, intersectRegions and differenceRegions combine regions on a raster, so their edges are approximate; transforms move regions within and between planes.
• Tracing. inspectPlaneQuery returns a result with the solver's trace.

import { parse } from '@pbroom/color-kit';
import {
  colorToPlane,
  containsPoint,
  definePlane,
  sense,
} from '@pbroom/color-kit/plane';

const plane = definePlane({ fixed: { h: 290 } }); // OKLCH lightness × chroma
const srgb = sense(plane).gamutRegion({ gamut: 'srgb' });
const brand = parse('oklch(0.62 0.24 290)');

colorToPlane(plane, brand); // → { x: 0.62, y: ≈ 0.4 }
containsPoint(srgb.visibleRegion, colorToPlane(plane, brand)); // → false

See Planes and queries for the model.