# 颜色引擎

> React 颜色选择器背后的颜色引擎，脱离 React 也能用：解析、序列化、转换颜色和检查对比度，修改时完整保留 HSVA 值。

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

颜色引擎是一个 JavaScript 颜色转换库，不依赖 React 或 DOM。它能解析 CSS 颜色字符串、在颜色模型之间转换、格式化输出，还提供一个可订阅的小型 store。你可以在组件、服务端任务、worker 或构建脚本里使用它。

引擎是一个独立的入口，不含 React，也不依赖 DOM：

```ts
import { parse, toFormat, ingest } from "chroma-panel/core";
```

这个入口不是原生 JS 颜色选择器，也不是 HTML 颜色选择器组件。它提供的是颜色数据和转换函数，可视化的选择器组件仍然需要 React。

## 为什么内部使用 HSVA

HSV 有两处会丢失信息。饱和度为零时，色相就无从谈起；亮度为零时，色相和饱和度都没有意义。如果用 RGB 或 hex 保存状态，亮度一降到零，你选好的色相就丢了。

引擎保存完整的 HSVA 值，并把每次修改合并进去，所以拖到极端位置再拖回来，得到的还是原来的颜色。详见[为什么颜色能在往返中保持不变](https://chroma-panel.jscrate.dev/zh/react/overview/about)。

## 下一步

- [解析](https://chroma-panel.jscrate.dev/zh/react/utils/parsing)：读入字符串
- [序列化](https://chroma-panel.jscrate.dev/zh/react/utils/serializing)：输出字符串
- [转换](https://chroma-panel.jscrate.dev/zh/react/utils/converting)：在颜色模型之间转换
- [对比度](https://chroma-panel.jscrate.dev/zh/react/utils/contrast)：APCA 和 WCAG 辅助函数