# 对比

> 对比 chroma-panel、react-colorful、react-color 和 @uiw/react-color 的体积、依赖、类型、功能与维护情况。

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

本文对比四个 React 颜色选择器库：chroma-panel、[react-colorful](https://github.com/omgovich/react-colorful)、[react-color](https://github.com/casesandberg/react-color) 和 [@uiw/react-color](https://github.com/uiwjs/react-color)。所有数字都在 2026 年 9 月 16 日对照 npm、Bundlephobia 和各项目自己的 README 核实过。数据来源附在文末，你可以自行核对。如果你在 react-colorful 和 react-color 之间犹豫，先看打包体积和维护情况，再看它们的控件是否符合你需要的界面。

## 概览

|                                | chroma-panel | react-colorful | react-color                      | @uiw/react-color |
| ------------------------------ | ------------ | -------------- | -------------------------------- | ---------------- |
| 最新版本                       | 1.0.1        | 5.8.1          | 2.19.3                           | 2.10.3           |
| 许可证                         | MIT          | MIT            | MIT                              | MIT              |
| 运行时依赖                     | 0            | 0              | 7                                | 20               |
| TypeScript 类型                | 自带         | 自带           | 单独安装（`@types/react-color`） | 自带             |
| 打包体积，gzip（Bundlephobia） | 22.0 kB      | 4.9 kB         | 38.4 kB                          | 16.0 kB          |
| 周下载量（9 月 5–11 日）       | 暂无统计     | 4,320,849      | 1,483,381                        | 129,521          |
| 首次发布                       | 2026-09-14   | 2020-08-05     | 2015-08-17                       | 2021-07-01       |
| 最近发布                       | 2026-09-16   | 2026-09-01     | 2020-10-28                       | 2026-05-24       |

如何阅读这张表：

- **打包体积**是 Bundlephobia 对各包主入口（按表中版本）给出的 gzip 数值，1 kB 按 1,000 字节计算。它衡量的是该入口导出的全部内容，而不是经过 tree shaking 后应用实际打包的体积。react-colorful 的 README 给出的单个选择器体积是 3.1 kB。@uiw/react-color 的每个选择器也都单独发布成了更小的包。
- **chroma-panel 自己的数字采用了另一种测量方式**：在 Vite 生产构建中把 React 设为 external，统计 gzip 后增加的体积。按这种方式，全部五种模式是 23.1 kB，面板外壳加一种模式是 15.0 kB。[关于](https://chroma-panel.jscrate.dev/zh/react/overview/about)页说明了测量方法。
- **周下载量**是 npm 在 2026 年 9 月 5–11 日的统计。chroma-panel 于 9 月 14 日首次发布，在这个统计区间之后，所以 npm 上还没有它的数据。
- **@uiw/react-color 的 20 个依赖**都是它自己的 `@uiw/*` 包。它还把 `@babel/runtime` 列为 peer dependency。

## 功能

「支持」表示该项目的 README 或文档介绍了这项功能。「未提及」表示截至 2026 年 9 月 16 日，在这些地方找不到相关内容，但你也许仍能自己实现。

| 功能                 | chroma-panel                           | react-colorful            | react-color             | @uiw/react-color                  |
| -------------------- | -------------------------------------- | ------------------------- | ----------------------- | --------------------------------- |
| 色轮                 | 支持                                   | 未提及                    | 未提及                  | 支持（`Wheel`）                   |
| 饱和度/亮度区域      | 支持（`ColorArea`，用于自定义模式）    | 支持                      | 支持                    | 支持（`Saturation`）              |
| 分通道滑块           | 支持（RGB、HSL、HSB）                  | 仅色相和透明度            | 仅色相和透明度          | 仅色相、透明度和明暗              |
| 透明度 (alpha)       | 支持                                   | 支持                      | 支持                    | 支持                              |
| 现代 CSS 颜色        | OKLCH、OKLab、Lab、LCH、Display P3     | 未提及                    | 未提及                  | 未提及                            |
| 渐变编辑器           | 支持（独立入口）                       | 未提及                    | 未提及                  | 支持（独立的包）                  |
| Hex/RGB/HSL 文本输入 | 支持（hex、`rgb()`、`hsl()`、`hwb()`） | 仅 hex（`HexColorInput`） | 支持（`EditableInput`） | 支持（hex、RGBA、HSLA）           |
| 预设色块或调色板     | 支持（调色板、120 色预设色网格）       | 仅有代码示例              | 支持（多种色块选择器）  | 支持（`Swatch` 等）               |
| 取色器               | 支持（`EyeDropper` API，仅 Chromium）  | 未提及                    | 未提及                  | 支持（`Chrome` 选择器，同一 API） |
| 从图片中取色         | 支持                                   | 未提及                    | 未提及                  | 未提及                            |
| 弹出层或表单输入组件 | 支持（`ColorInput`）                   | 弹出层只有代码示例        | 未提及                  | 未提及                            |
| TypeScript 类型      | 自带                                   | 自带                      | 单独的包                | 自带                              |
| 键盘和屏幕阅读器支持 | 支持（原生 range 输入）                | 支持（遵循 WAI-ARIA）     | 未提及                  | 未提及                            |
| 对比度辅助函数       | WCAG、透明度、APCA 及配色建议          | 未提及                    | 未提及                  | 未提及                            |
| 零依赖               | 是                                     | 是                        | 否（7 个）              | 否（20 个）                       |
| 最近发布             | 2026-09-21                             | 2026-09-01                | 2020-10-28              | 2026-05-24                        |

## 如何选择

### react-colorful 替代方案

如果最看重打包体积，选 react-colorful。它是四个库里最小的，没有依赖，自带类型，并遵循 WAI-ARIA 规范。它的下载量也遥遥领先，最新版本发布于 2026 年 9 月 1 日。它提供饱和度区域、色相滑块、可选的透明度和 hex 输入框。弹出层和色块需要你参照 README 中的示例自己实现。

### react-color 替代方案

如果你想要现成的外观，选 react-color。它自带 13 种选择器，风格仿照 Sketch、Photoshop、Chrome 等，还提供用来搭建自己选择器的基础组件。它的最新版本 2.19.3 发布于 2020 年 10 月 28 日。它有七个依赖，类型需要从单独的 `@types/react-color` 包获取。用它开始一个新项目之前，请先权衡这些因素。

### @uiw/react-color

如果你想要许多可以逐个安装的小型选择器，选 @uiw/react-color。Sketch、Chrome、Wheel、Swatch、Slider 等都各有自己的包。它的 Chrome 选择器带有取色器，以及 hex、RGBA 和 HSLA 输入框。主包依赖了其中 20 个包，所以如果你只要其中一个选择器，请直接安装那个选择器的包。

### chroma-panel

如果你需要 CSS Color 4、渐变、取色器、图片取色、调色板和可直接用于表单的输入框，可以选 chroma-panel 作为 react-colorful 的替代方案。`ColorInput` 会随表单提交，响应 `form.reset()` 重置，并支持原生校验，详见[表单](https://chroma-panel.jscrate.dev/zh/react/handbook/forms)。[取色器](https://chroma-panel.jscrate.dev/zh/react/utils/use-eyedropper)仅在 Chromium 系浏览器中可用，[图片取色](https://chroma-panel.jscrate.dev/zh/react/modes/image)能从用户拖入的照片中提取调色板。chroma-panel 还很新：它于 2026 年 9 月 14 日首次发布，最新版本 1.0.1 发布于 9 月 21 日，下载记录还很少。如果你要的只是一个 hex 选择器，react-colorful 更小。

### rc-color-picker 怎么样？

`rc-color-picker` 是大家对比颜色选择器时可能会看到的另一个 React 包。它没有列入上表，因为这次核查没有检查它当前的打包体积、依赖和维护情况。做同样的对比之前，请先查看它的 npm 页面和代码仓库。上表只收录了能从所附来源核实的数据。

## 从 react-colorful 迁移

在 react-colorful 中，`onChange` 收到的是颜色字符串。在 chroma-panel 中，`onChange` 收到的是一个 `ColorChangeResult` 对象，需要从中读取 `result.hex`。

一个 react-colorful 的 hex 选择器：

```tsx
import { useState } from "react";
import { HexColorPicker } from "react-colorful";

export function Picker() {
  const [color, setColor] = useState("#aabbcc");

  return <HexColorPicker color={color} onChange={setColor} />;
}
```

在 chroma-panel 中，最接近的写法是使用内联的 `ChromaPanel`：

```tsx
import { useState } from "react";
import { ChromaPanel, type ColorChangeResult } from "chroma-panel";

export function Picker() {
  const [color, setColor] = useState<string>("#aabbcc");

  const handleChange = (result: ColorChangeResult): void => {
    setColor(result.hex);
  };

  return (
    <ChromaPanel
      value={color}
      onChange={handleChange}
      modes={["wheel"]}
      showAlpha={false}
      showTitleBar={false}
    />
  );
}
```

需要改动的地方：

- `color` 改为 `value`，`onChangeEnd` 改为 `onChangeComplete`。
- `showAlpha={false}` 对应没有透明度的 `HexColorPicker`。如果原来用的是 `HexAlphaColorPicker`，保留透明度，并读取 `result.hexa`。
- 色轮模式显示的是一个圆盘加亮度滑块，而不是方形区域。不传 `modes` 就会显示全部五种模式。
- 从 `chroma-panel` 导入仍然会打包全部五种模式。如果只想打包色轮，请从 `chroma-panel/panel` 和 `chroma-panel/wheel` 导入。
- 如果需要一个点击后打开选择器的色块按钮，使用 `ColorInput`，传入同样的 `value` 和 `onChange`。

[快速开始](https://chroma-panel.jscrate.dev/zh/react/overview/quick-start)介绍了这两个组件以及体积更小的导入方式。

## 数据来源

- chroma-panel，核查于 2026 年 9 月 16 日：
  - [npm registry：最新版本](https://registry.npmjs.org/chroma-panel/latest)
  - [npm registry：发布日期](https://registry.npmjs.org/chroma-panel)
  - [npm 周下载量](https://api.npmjs.org/downloads/point/last-week/chroma-panel)
  - [Bundlephobia 体积](https://bundlephobia.com/api/size?package=chroma-panel@1.0.1)
  - [关于：体积与兼容性](https://chroma-panel.jscrate.dev/zh/react/overview/about)
- react-colorful，核查于 2026 年 9 月 16 日：
  - [npm 上的 react-colorful](https://www.npmjs.com/package/react-colorful)
  - [npm registry：最新版本](https://registry.npmjs.org/react-colorful/latest)
  - [npm registry：发布日期](https://registry.npmjs.org/react-colorful)
  - [npm 周下载量](https://api.npmjs.org/downloads/point/last-week/react-colorful)
  - [Bundlephobia 体积](https://bundlephobia.com/api/size?package=react-colorful@5.8.1)
  - [README](https://raw.githubusercontent.com/omgovich/react-colorful/HEAD/README.md)
- react-color，核查于 2026 年 9 月 16 日：
  - [npm 上的 react-color](https://www.npmjs.com/package/react-color)
  - [npm registry：最新版本](https://registry.npmjs.org/react-color/latest)
  - [npm registry：发布日期](https://registry.npmjs.org/react-color)
  - [npm 周下载量](https://api.npmjs.org/downloads/point/last-week/react-color)
  - [Bundlephobia 体积](https://bundlephobia.com/api/size?package=react-color@2.19.3)
  - [npm registry：@types/react-color](https://registry.npmjs.org/@types%2Freact-color/latest)
  - [README](https://raw.githubusercontent.com/casesandberg/react-color/HEAD/README.md)
  - [文档：选择器 API](https://raw.githubusercontent.com/casesandberg/react-color/HEAD/docs/documentation/03.04-individual.md)
  - [文档：辅助组件](https://raw.githubusercontent.com/casesandberg/react-color/HEAD/docs/documentation/04.02-helpers.md)
- @uiw/react-color，核查于 2026 年 9 月 16 日：
  - [npm registry：最新版本](https://registry.npmjs.org/@uiw%2Freact-color/latest)
  - [npm registry：发布日期](https://registry.npmjs.org/@uiw%2Freact-color)
  - [npm 周下载量](https://api.npmjs.org/downloads/point/last-week/@uiw/react-color)
  - [Bundlephobia 体积](https://bundlephobia.com/api/size?package=@uiw/react-color@2.10.3)
  - [README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color/README.md)
  - [Chrome 选择器 README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-chrome/README.md)
  - [Chrome 选择器取色器源码](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-chrome/src/EyeDropper.tsx)
  - [Sketch 选择器 README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-sketch/README.md)
  - [Wheel README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-wheel/README.md)
  - [Swatch README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-swatch/README.md)
  - [Shade slider README](https://raw.githubusercontent.com/uiwjs/react-color/HEAD/packages/color-shade-slider/README.md)