ReactColor 是一个优秀的 React 颜色选择器组件，官方给了多种布局供开发者选择。
笔者常用的主题为 Sketch，这种主题涵盖了颜色面板、推荐色块、RGB颜色输入等功能，比较完善。但是最近在写一个富文本编辑器，编写过程中遇到了一些问题，比如用户在点击推荐色块时，编辑器会失去焦点，无法对字体颜色进行更改。如果是编辑器自有的组件，可以使用以下代码
event.preventDefault();该代码可以禁止浏览器默认行为，比如点击推荐色块之后只将色值向上传递，而不改变浏览器当前 focus 状态。但是 ReactColor 并没有暴露该事件，故 clone 了源码，在编辑器内集成了该组件，实现功能的同时也能够减少打包体积。
本章节主要介绍 ReactColor 的实现原理，以比较有代表性的 Sketch 主题为例。
由上图可以看到，整个颜色选择器面板由这六个部分组成，分别是亮度与饱和度调节面板、色相 Hue 调节面板、透明度调节面板、当前颜色的 RGBA 与 Hex 值、推荐色块以及颜色实时预览。下面的部分就来介绍其原理实现。
与颜色相关的几个属性分别为亮度、饱和度、色相与透明度，与我们平时用到的 RGB 色彩模型不同，ReactColor 中用的是 HSV 色彩模型，其具体含义如下：
下面是维基百科对 HSV 色彩模型的介绍：
HSV即色相、饱和度、明度（英语：Hue, Saturation, Value），又称HSB，其中B即英语：Brightness。
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
明度（V），亮度（L），取0-100%。
至于为什么选用 HSV 色彩模型而不是直接使用 RGB，大家在使用 ReactColor 的过程中应该会发现，只要在下方的 色相 Hue 调节面板上选中了颜色，亮度与饱和度调节面板就会呈现什么颜色。举个例子：你选择了黄色，那么最上方调节面板呈现的就是黄色，差别也只是饱和度与明度不同而已。这就是使用 HSV 色彩模型的优势，让用户选择的颜色变成可预知并且方便调节的。
RGB 颜色空间利用三个颜色分量的线性组合来表示颜色，任何颜色都与这三个分量有关，而且这三个分量是高度相关的，所以连续变换颜色时并不直观，想对图像的颜色进行调整需要更改这三个分量才行。自然环境下获取的图像容易受自然光照、遮挡和阴影等情况的影响，即对亮度比较敏感。而 RGB 颜色空间的三个分量都与亮度密切相关，即只要亮度改变，三个分量都会随之相应地改变，而没有一种更直观的方式来表达，而这就是 HSV 色彩模型的优势所在。
上面提到，在日常的前端开发过程中还是普遍使用 RGB 色彩模型进行颜色表示，在用户设置好 HSV 值后我们需要将其转为 RGB 值，公式如下（该公式来自）：
这样在用户选择完成后就可以对色彩空间实时转换，通过 onChange 回调返回给用户。
2.3 HSV 色彩模型在 ReactColor 中的实现