# CSS Color 4

> Parse, convert, serialize, and gamut-map OKLCH, OKLab, Lab, LCH, sRGB, and Display P3 colors with a zero-dependency TypeScript color engine.

Source: https://chroma-panel.jscrate.dev/react/utils/css-color-4
Last updated: 2026-09-21

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.

```ts
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

```ts
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.