Chroma Panel

Search documentation

Find a page or section

CSS Color 4

View as Markdown

Modern CSS color spaces without another dependency.

Import modern CSS color tools from chroma-panel/color. They work without React or the DOM and preserve the source color space while you parse and convert.

import {
  convertColor,
  isInGamut,
  mapToGamut,
  parseColor,
  serializeColor,
} from "chroma-panel/color";
 
const brand = parseColor("oklch(72% 0.18 250)")!;
 
if (!isInGamut(brand, "srgb")) {
  const fallback = mapToGamut(brand, "srgb");
  console.log(serializeColor(fallback));
}

Supported color spaces

parseColor reads OKLCH, OKLab, Lab, LCH, sRGB and Display P3. The returned ColorValue contains space, three numeric channels, and alpha, so converting a color does not force it through 8-bit hex.

The existing parse function also accepts these CSS strings and converts them to the panel's HSVA value. Existing hex, RGB, HSL and HWB input remains unchanged.

Gamut mapping

isInGamut(color, "srgb") tells you whether a color can be displayed in the target space. mapToGamut reduces OKLCH chroma instead of clipping individual RGB channels, which better preserves the color's perceived hue and lightness.

Serialization

serializeColor(brand, { format: "oklch", precision: 4 });
serializeColor(brand, { format: "display-p3", gamut: "display-p3" });

Use gamut: "preserve" when the output may remain wide-gamut, or request srgb for a broadly compatible fallback.

Browser support

The conversion engine performs the math in JavaScript and works anywhere the package works. Whether the serialized color displays in CSS depends on browser support for that CSS color syntax. Generate an sRGB fallback when supporting older browsers.