ChromaPanel vs 其他 React 颜色选择器对比：功能、包体积、可访问性等

选择一个 React 颜色选择器，听起来很简单，直到你开始认真考虑自己的应用到底需要什么。

也许你只需要一个很小的 HEX 颜色选择器。

也许你需要 RGB 和 HSL 控制、预设的调色板、一个吸管工具、从图片中取色、渐变功能、可访问性、表单支持，以及 OKLCH 等现代 CSS 颜色。

这些是完全不同的需求。

目前市面上有多个流行的 React 颜色选择器库，但它们的定位并不完全相同。

在这篇对比中，我重点看四个方案：

• ChromaPanel
• react-colorful
• react-color
• @uiw/react-color

我的目的不是说某个包应该处处使用，而是想展示每个 React 颜色选择器各自提供了什么、差异在哪里、分别适合哪种项目。

React 颜色选择器一览对比

下面的包体积数据基于 ChromaPanel 对比审计和当前官方文档。包体积指通过 Bundlephobia 测得的包主入口大小，与实际应用经过 tree-shaking 后真正打包的大小不同。

	ChromaPanel	react-colorful	react-color	@uiw/react-color
TypeScript 类型	内置	内置	独立类型包	内置
运行时依赖	0	0	7	主包 20 个
主入口 gzip	约 22 kB	约 4.9 kB	约 38.4 kB	约 16 kB
色轮	支持	不支持	不支持	支持
RGB/HSL 通道滑块	支持	有限	有限	有限
透明度 Alpha	支持	支持	支持	支持
调色板/色板	支持	需自行实现	支持	支持
图片取色	支持	不支持	不支持	不支持
吸管工具	支持	不支持	不支持	Chrome 风格选择器支持
渐变编辑器	支持	不支持	不支持	不支持
现代 CSS 颜色	支持	不支持	不支持	不支持
表单就绪输入	支持	需自行构建	不支持	不支持
可访问性文档	有	有	无	文档有限
对比度工具	支持	不支持	不支持	不支持

当我们把这些功能放进真实的 React 应用里看，差异会更有意义。

1. ChromaPanel

ChromaPanel 是本次对比中功能最全面的一款。

它不只提供一个饱和区域和一个色相滑块，而是把颜色选择当作一个更大的 UI 问题来处理。

你可以把它当做一个简单的 React 颜色输入框使用，但同一个包可以扩展成一个相当完整的颜色系统。

import { ColorInput } from "chroma-panel";

export function BrandColor() {
  return (
    <ColorInput
      defaultValue="#3366cc"
      aria-label="Brand color"
    />
  );
}

这是基础用法。在底层，ChromaPanel 提供了五种不同的选色模式：色轮、滑块、调色板、铅笔色板 和 图片取色。此外还包括吸管工具、原生表单行为、CSS Color 4 工具、渐变、对比度工具、TypeScript 类型，以及零运行时依赖。

五种不同的取色方式

一个主要差异是：ChromaPanel 不会强迫所有用户使用同一种颜色选择器界面。

• 色轮：适合直观地探索颜色。
• 滑块：提供精确的 RGB、HSL 和 HSB 控制。
• 调色板：当产品有预设或审批通过的颜色时很好用。
• 铅笔色板：提供 120 色的大色板网格。
• 图片模式：允许用户直接从照片或图片中取色。

你可以全部展示，也可以只选择 UI 需要的模式。

import { ChromaPanel } from "chroma-panel";

export function ThemeColorPicker() {
  return (
    <ChromaPanel
      defaultValue="#7c3aed"
      modes={["wheel", "sliders", "palettes"]}
    />
  );
}

这让 ChromaPanel 在同一个应用存在不同取色流程时非常实用。例如，设置表单可以用 ColorInput，而设计编辑器可以展示完整的面板。

从图片中取色

图片取色 是 ChromaPanel 与其他 React 颜色选择器库最大的差异点之一。

用户可以上传一张图片，直接从里面取精确的颜色。ChromaPanel 还可以从图片中提取一套调色板。

当用户上传 logo、产品图、照片或品牌素材，并希望创建配套颜色时，这个功能非常有用。本次对比中其他三个库目前都没有把图片取色作为内置功能写进文档。

吸管工具支持

ChromaPanel 支持浏览器的 EyeDropper API。当浏览器支持时，用户可以从屏幕上的任意位置取色。这对设计工具和主题编辑器尤其好用。

有一个重要限制：原生 EyeDropper API 依赖浏览器，目前主要支持 Chromium 内核的浏览器。@uiw/react-color 也在其 Chrome 风格选择器中提供了吸管功能，其 API 包含 showEyeDropper 选项。

现代 CSS 颜色

这是 ChromaPanel 与传统 React 颜色选择器区别较大的领域。它内置了现代色彩空间的工具，包括：OKLCH、OKLab、Lab、LCH、Display P3 和 sRGB。

这一点越来越重要，因为现代 CSS 应用越来越多地使用传统 HEX、RGB、HSL 之外的颜色格式。

你可以解析一个现代 CSS 颜色、检查它是否在目标色域内、必要时做映射，再重新序列化。

import {
  parseColor,
  isInGamut,
  mapToGamut,
  serializeColor,
} from "chroma-panel/color";

const color = parseColor("oklch(72% 0.18 250)");

if (color && !isInGamut(color, "srgb")) {
  const fallback = mapToGamut(color, "srgb");
  console.log(serializeColor(fallback));
}

本次对比中的其他 React 颜色选择器目前都没有文档记录等效的内置 CSS Color 4 支持。

渐变编辑

ChromaPanel 还提供了独立的渐变编辑器。

import {
  GradientEditor,
  gradientToCss,
} from "chroma-panel/gradient";

你可以处理线性渐变和径向渐变，同时让这部分代码与基础颜色选择器保持分离。这种分离很有用，因为只需要纯色的项目不必加载渐变功能。

表单支持

这个特性很容易被忽略。颜色选择器经常会被放进一个表单里。

ChromaPanel 的 ColorInput 表现得像一个真正的表单字段。

<form>
  <ColorInput
    name="brandColor"
    defaultValue="#2563eb"
    required
  />
  <button type="submit">Save</button>
</form>

选中的值可以参与表单提交、原生校验和表单重置行为。使用较小的颜色选择器库时，通常需要自己把选择器接入表单状态。两种做法没有对错之分，但内置这些行为能减少一些重复的应用代码。

可访问性

颜色选择器是可视化组件，但不应该依赖鼠标才能操作。

ChromaPanel 记录了键盘和屏幕阅读器的行为，并使用原生 range 输入来处理颜色轴。react-colorful 也专门记录了可访问性，声明遵循 WAI-ARIA 规范。所以当可访问性是重要需求时，这两个库值得重点考虑。

对比度检查

ChromaPanel 还包含对比度相关工具。文档覆盖 WCAG 对比度、感知透明度检查、APCA 以及配色建议。

这意味着颜色选择器可以和工作流联动，比如选择背景色后立即检查文字是否仍然可读。这对主题构建器和设计系统尤其有用。

2. react-colorful

react-colorful 几乎走了相反的路线。它最大的优势是简洁和体积小。

官方文档把它描述为一个极小的 React 和 Preact 颜色选择器。它零依赖、内置 TypeScript 类型、支持可访问性，并提供多种选择器组件，覆盖 HEX、RGB、HSL、HSV 及其带 alpha 的变体。

一个基础示例非常小：

import { HexColorPicker } from "react-colorful";

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

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

它的 README 提到单个选择器大约 3.1 kB gzip，而对比审计测得的包主入口约为 4.9 kB。这两个数字衡量的是不同对象，并不矛盾。

这是 react-colorful 吸引人的主要原因：你得到一个聚焦的 React 颜色选择器，而不需要引入庞大的功能集。

它支持饱和、色相、透明度、多种颜色格式、触屏设备、可访问性和 TypeScript。

它不打算提供的功能同样重要：调色板和弹出层只是以"配方"形式给出，不是包的主责；图片取样、渐变、现代 CSS 色彩空间和吸管工具都没有作为内置功能记录在文档中。

所以，如果你需要的是一个紧凑的颜色控件，并且愿意自己搭建周围的 UI，react-colorful 依然是非常强的一个选择。

3. react-color

react-color 又走了不同的思路。它不专注于一个小型选择器，而是提供了 13 种不同的选择器样式，包括 Sketch、Photoshop、Chrome、Material、Circle、Block、Twitter、GitHub 等。

一个典型示例长这样：

import { SketchPicker } from "react-color";

function Picker() {
  return <SketchPicker />;
}

当你想要一个看起来已经熟悉的选择器界面时，这很有用。你不需要自己设计完整的颜色选择器布局，直接挑一个现成样式就行。

代价是 react-color 是一个较老的包。npm 上当前版本是 2.19.3，发布已经很多年了。它的 TypeScript 类型定义是单独提供的，对比审计记录它有 7 个运行时依赖，主入口包体积也比其他几个包更大。

这并不表示这个包不能用。只是说，在把它引入新 React 项目之前，值得考虑它的维护历史和架构。如果现有应用已经在用 react-color，仅仅因为另一个库更新就替换它，也可能带来不必要的返工。

4. @uiw/react-color

@uiw/react-color 介于前面几种思路之间。它提供很多不同的 React 颜色选择器组件，而且这些组件可以单独安装。

它的组件集合包括 Sketch、Chrome、Wheel、Swatch、Slider、Material、Compact、Circle、Block、GitHub、Colorful 等。也提供更底层的部件，如饱和、色相、透明度、可编辑输入框和明暗滑块。

这种模块化结构很有用。比如你的项目只需要色轮，就不一定要围绕主包搭建一切。

npm install @uiw/react-color-wheel

主包 @uiw/react-color 当前列出 20 个依赖，但大部分是它自己的组件包。当只需要库的一部分时，单独安装单个选择器会更合理。它也包含 TypeScript 声明。

一个有意思的特性是 Chrome 选择器的吸管选项。

<Chrome
  showEyeDropper
  color={color}
  onChange={handleChange}
/>

这个包还提供了可编辑的 HEXA、RGBA 和 HSLA 输入模式。

如果你希望有很多独立的、可分别安装的选择器样式，@uiw/react-color 提供了很大的灵活性。

ChromaPanel vs react-colorful

这可能是最有价值的直接对比。

两个库都是零运行时依赖，都内置 TypeScript 类型，都有可访问性文档。但它们的定位差异很大。

react-colorful 专注于用很少的代码完成核心取色工作。ChromaPanel 则围绕选择器提供了一大套功能。

用 ChromaPanel，你可以在同一个项目里获得色轮、RGB/HSL/HSB 通道滑块、调色板、图片取样、吸管、渐变、表单集成、对比度工具和现代 CSS 颜色。

用 react-colorful，你得到一个明显更小的基础，然后可以按需构建应用需要的额外部件。

所以真正的问题不是：哪个 React 颜色选择器更小？答案显然是 react-colorful。

更有用的问题是：我的应用到底需要多少颜色功能？

如果答案只是一个简单的 HEX、RGB、HSL 或 HSV 选择器，那么小包很有意义。如果答案包含多种颜色工作流，那么只比较基础选择器的大小就不太有参考价值了。

ChromaPanel vs react-color

这两个包也差异很大。

react-color 提供许多辨识度很高的预制选择器界面。ChromaPanel 则在一个系统内提供不同的取色方式。

如果你特别想要经典的 Sketch 或 Photoshop 风格选择器，react-color 直接就有这种界面。ChromaPanel 更聚焦现代应用特性：图片取样、CSS Color 4、表单行为、可访问性、渐变、对比度计算、吸管工具以及多种选择模式。

另一个差异是包的年龄和维护情况。react-color 已经存在多年，有非常大的使用历史。ChromaPanel 则新得多，还没有那么长的生态历史。评估依赖时，历史记录可能很重要，值得和功能放在一起考虑。

ChromaPanel vs @uiw/react-color

这个对比更接近，因为两者都提供多种取色方式。

@uiw/react-color 给开发者提供一大组独立的选择器组件。ChromaPanel 在同一个颜色面板内提供多种模式。

@uiw/react-color 有专门的色轮、色板、Chrome 风格选择器、Sketch 风格选择器、滑块和底层原语。ChromaPanel 则增加了图片颜色提取、现代 CSS 色彩空间、原生表单集成、对比度工具和独立的渐变编辑器。

两种方案都能很好地工作。主要区别是：你想要一组独立的选择器包，还是一个可以在不同模式间切换的完整颜色系统。

包体积怎么看？

包体积需要结合上下文来看。

对比审计测得的包主入口大约是：

• ChromaPanel：22.0 kB gzip
• @uiw/react-color：16.0 kB
• react-colorful：4.9 kB
• react-color：38.4 kB

但这些数字并不是全部事实。

react-colorful 文档给出了单个选择器更小的体积。@uiw/react-color 允许单独安装单个选择器包。ChromaPanel 也提供了更小的入口，应用不必使用全部五种模式。

它自己的 Vite 测量显示，五种模式全开约 23.1 kB gzip，面板外壳加一种模式大约 15 kB。

这就是为什么包体积对比永远要包含"实际打包的功能"。一个 5 kB 的包，加上若干自定义组件，等完整功能做完后未必还是 5 kB。反过来，一个真正只需要简单颜色选择器的应用，也不应该打包永远不会用到的高级功能。

应该用哪个 React 颜色选择器？

没有一个答案适合所有项目。

• 当你的应用需要更完整的颜色系统——多种选择模式、图片取色、吸管、调色板、渐变、现代 CSS 颜色、表单行为、可访问性和对比度工具——用 ChromaPanel。
• 当你主要想要一个小巧、可访问的 React 颜色选择器，并愿意自己搭建弹出层、调色板等额外 UI——用 react-colorful。
• 当它那一组熟悉的现成选择器样式正好匹配现有应用或特定 UI 需求——用 react-color。
• 当你想要一组模块化选择器组件，喜欢能单独安装 Wheel、Chrome、Sketch、Swatch 等样式——用 @uiw/react-color。

这才是对比 React 颜色选择器库更有用的方式，而不是简单地问哪个包功能最多或体积最小。

总结

一个 React 颜色选择器可以是一个微型输入框，也可以是应用设计系统中相当大的一部分。这正是这四个库看起来如此不同的原因。

react-colorful 把核心做小。react-color 提供许多熟悉的选择器样式。@uiw/react-color 提供模块化的独立组件集合。而 ChromaPanel 试图在一个包里覆盖更宽的颜色工作流：色轮、滑块、调色板、铅笔色板、图片取样、吸管、渐变、可访问性、表单集成、对比度工具和现代 CSS 色彩空间。

对于一个简单的 HEX 输入框，你可能不需要所有这些。但对于主题编辑器、网站构建器、设计工具、品牌界面、SaaS 后台、产品定制器，或者任何用户需要认真处理颜色的应用，这些额外功能能省下大量自定义实现的工作。

重要的是：根据你要构建的体验来选择 React 颜色选择器，而不只是看包的名字。前端开发中如果遇到环境问题，也可以参考本站的浏览器卡顿排查和更多实用教程。