@pbroom/color-kitGamut

toSrgbGamut

Map a Color to the sRGB gamut.

functionimport { toSrgbGamut } from '@pbroom/color-kit';membership.ts:383
function toSrgbGamut(color: Color): Color;

function toSrgbGamut(
  color: Color,
  options: GamutMapOptions | undefined,
): Color;

Colors already in gamut (per inSrgbGamut, with its GAMUT_EPSILON slack) are returned unchanged. Otherwise options.method picks the algorithm:

  • 'chroma-reduction' (default): binary search for the largest in-gamut OKLCH chroma at the same lightness and hue. Lightness and hue are preserved exactly, which plane geometry, contrast regions and slider tracks rely on.
  • 'css': the CSS Color 4 gamut mapping algorithm (chroma bisection with a 0.02 deltaE OK just-noticeable-difference clip), as browsers and colorjs.io toGamut({ method: 'css' }) define it. Keeps more chroma (e.g. oklch(0.7 0.35 150) maps to chroma ~0.210 instead of ~0.193), at the cost of small lightness and hue shifts. Matches colorjs.io outside the GAMUT_EPSILON tolerance band; colors inside the band are returned unchanged, while colorjs.io (epsilon 0) still maps them, so results can differ slightly there (up to ~0.014 deltaE OK near black).

Overload 1 of 2

Parameters

Returns

Color

Overload 2 of 2

Parameters

Returns

Color

Example

TypeScript
import { toSrgbGamut } from '@pbroom/color-kit';

const vivid = { l: 0.7, c: 0.35, h: 150, alpha: 1 };
toSrgbGamut(vivid); // → { l: 0.7, c: ≈ 0.1928, h: 150, alpha: 1 }
toSrgbGamut(vivid, { method: 'css' }).c; // → ≈ 0.2104 (l, h shift slightly)