CSS Color 4

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

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 通道，这样能更好地保留颜色在视觉上的色相和明度。

序列化

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

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

浏览器支持

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