你知道 react-color 的实现原理吗 (2)

既然使用了 HSV 色彩模型就要考虑一下如何表示这三个变量，下面我们分两部分来讲。

2.3.1 Hue 色相 颜色名称 红绿蓝含量 角度 代表物体
红色   R255,G0,B0   0°   血液、草莓  
橙色   R255,G128,B0   30°   火、橙子  
黄色   R255,G255,B0   60°   香蕉、杧果  
黄绿   R128,G255,B0   90°   柠檬  
绿色   R0,G255,B0   120°   草、树叶  
青绿   R0,G255,B128   150°   军装  
青色   R0,G255,B255   180°   水面、天空  
靛蓝   R0,G128,B255   210°   水面、天空  
蓝色   R0,G0,B255   240°   海、墨水  
紫色   R128,G0,B255   270°   葡萄、茄子  
品红   R255,G0,B255   300°   火、桃子  
紫红   R255,G0,B128   330°   墨水  

如何横向表示色相呢，只需要一行 CSS 代码：

background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);

这样即可大致表达出 0-360 度的色相值，效果如下：

根据鼠标拖动的位置距离左边界的距离就可以计算出色相值。

/** * 在颜色值发生变化时实时计算相应的色相值 * @param event */ const handleChange = (event: any) => { if (!ref.current) { return; } const clientRect = ref.current.getBoundingClientRect(); const { width: containerWidth } = clientRect; const x: number = typeof event.pageX === 'number' ? event.pageX : event.touches[0].pageX; const left = x - (clientRect.left + window.pageXOffset); let innerHue; // 处理边界值 if (left < 0) { innerHue = 0; } else if (left > containerWidth) { innerHue = 359; } else { const percent = (left * 100) / containerWidth; innerHue = (360 * percent) / 100; } setHue(innerHue); props.onChange({ h: innerHue }); };

2.3.2 Saturation 饱和度与 Value 明度

饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。明度（V）指颜色的亮度，不同的颜色具有不同的明度。

在 ReactColor 中按照如下方式来表示饱和度与明度。

其实用 CSS 表示也比较简单，使用渐变色来表示就可以实现该效果。

background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));

与色相的计算方式一样，也是根据鼠标拖动的位置距离左边界和下边界的距离来计算，计算方法可以参考。

三、总结