对比

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

概览

如何阅读这张表：

• 打包体积是 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。关于页说明了测量方法。
• 周下载量是 npm 在 2026 年 9 月 5–11 日的统计。chroma-panel 于 9 月 14 日首次发布，在这个统计区间之后，所以 npm 上还没有它的数据。
• @uiw/react-color 的 20 个依赖都是它自己的 @uiw/* 包。它还把 @babel/runtime 列为 peer dependency。

功能

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

如何选择

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() 重置，并支持原生校验，详见表单。取色器仅在 Chromium 系浏览器中可用，图片取色能从用户拖入的照片中提取调色板。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 选择器：

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：

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。

快速开始介绍了这两个组件以及体积更小的导入方式。

数据来源

• chroma-panel，核查于 2026 年 9 月 16 日：
  • npm registry：最新版本
  • npm registry：发布日期
  • npm 周下载量
  • Bundlephobia 体积
  • 关于：体积与兼容性
• react-colorful，核查于 2026 年 9 月 16 日：
  • npm 上的 react-colorful
  • npm registry：最新版本
  • npm registry：发布日期
  • npm 周下载量
  • Bundlephobia 体积
  • README
• react-color，核查于 2026 年 9 月 16 日：
  • npm 上的 react-color
  • npm registry：最新版本
  • npm registry：发布日期
  • npm 周下载量
  • Bundlephobia 体积
  • npm registry：@types/react-color
  • README
  • 文档：选择器 API
  • 文档：辅助组件
• @uiw/react-color，核查于 2026 年 9 月 16 日：
  • npm registry：最新版本
  • npm registry：发布日期
  • npm 周下载量
  • Bundlephobia 体积
  • README
  • Chrome 选择器 README
  • Chrome 选择器取色器源码
  • Sketch 选择器 README
  • Wheel README
  • Swatch README
  • Shade slider README