# CSS Color 4

> 用零依赖的 TypeScript 颜色引擎解析、转换和序列化 OKLCH、OKLab、Lab、LCH、sRGB 与 Display P3 颜色，并做色域映射。

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

从 `chroma-panel/color` 导入现代 CSS 颜色工具。它们不依赖 React 或 DOM，解析和转换时会保留原来的色彩空间。

```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));
}
```

## 支持的色彩空间

`parseColor` 可以读取 OKLCH、OKLab、Lab、LCH、sRGB 和 Display P3。返回的 `ColorValue` 包含 `space`、三个数值组成的 `channels` 和 `alpha`，所以转换颜色时不必先转成 8 位 hex。

原有的 `parse` 函数同样接受这些 CSS 字符串，并把它们转换成面板使用的 HSVA 值。原来的 hex、RGB、HSL 和 HWB 输入不受影响。

## 色域映射

`isInGamut(color, "srgb")` 用来判断颜色能否在目标色彩空间中显示。`mapToGamut` 通过降低 OKLCH 的彩度来映射，而不是逐个裁剪 RGB 通道，这样能更好地保留颜色在视觉上的色相和明度。

## 序列化

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

如果输出可以保持广色域，使用 `gamut: "preserve"`；如果需要兼容性更好的回退值，就指定 `srgb`。

## 浏览器支持

转换引擎在 JavaScript 中完成计算，只要这个包能运行的地方都能用。序列化后的颜色能否在 CSS 中显示，取决于浏览器是否支持对应的 CSS 颜色语法。如果要支持旧版浏览器，请生成一个 sRGB 回退值。