# 关于

> 这个 React 颜色选择器如何存储颜色、会给生产包增加多少体积、支持哪些浏览器和 React 版本，以及采用什么许可证。

Source: https://chroma-panel.jscrate.dev/zh/react/overview/about
Last updated: 2026-09-21

chroma-panel 用 HSVA 保存颜色，没有任何运行时依赖，并自带 TypeScript 类型声明。下面是把它加入应用之前值得了解的细节。

## 为什么颜色来回转换不会失真

HSV 有两处会丢失信息：饱和度为零时，色相就无从谈起；亮度为零时，色相和饱和度都没有意义。用 RGB 或 hex 保存状态的选择器经常碰到这个问题：把亮度拖到黑色再拖回来，你选好的色相会变回红色。

这个选择器保存完整的 HSVA 值，每次改动都合并进去，而不是整体替换。所以即使拖到极端值再拖回来，得到的仍是你最初的颜色。同一套引擎也已导出，你可以在自己的代码里使用，详见[颜色引擎](https://chroma-panel.jscrate.dev/zh/react/utils/color-engine)。

> **需要精确值时怎么读取 hex**
>
> `hex` 的每个通道都会取整到 8 位。如果颜色经过来回转换后必须保持不变，请存储
> `hsva`，并把它传回 `value`。

## 体积

测量方式：在真实的 Vite 生产构建中，把 React 设为 external，统计 gzip 后增加的体积。

| 导入内容           | 应用增加的体积 |
| ------------------ | -------------- |
| 全部五种模式       | 23.1 kB        |
| 面板外壳加一种模式 | 15.0 kB        |

`dependencies` 为空。`react` 和 `react-dom` 是 peer dependency，所以用的就是你应用里已有的那一份。想得到较小的那个体积，请按[入口](https://chroma-panel.jscrate.dev/zh/react/utils/entry-points)中的方式，只导入面板外壳和一种模式。

## 兼容性

|            |                                               |
| ---------- | --------------------------------------------- |
| React      | 16.14 及以上，包括 19                         |
| React DOM  | 必需。弹出层通过 `createPortal` 渲染          |
| 浏览器     | Chrome 123、Firefox 120、Safari 17.5          |
| TypeScript | 自带类型，无需安装 `@types` 包                |
| 模块格式   | ESM 和 CommonJS                               |
| 服务端渲染 | 安全。依赖浏览器的文件都已标记 `'use client'` |

最低浏览器版本由什么决定，见[浏览器支持](https://chroma-panel.jscrate.dev/zh/react/handbook/browser-support)；Next.js 和 Remix 的用法见[服务端渲染](https://chroma-panel.jscrate.dev/zh/react/handbook/server-rendering)；导出了哪些类型见 [TypeScript](https://chroma-panel.jscrate.dev/zh/react/handbook/typescript)。

## 许可证

MIT，作者 [Sohail Khan](https://me.jscrate.dev)。