Chrome DevTools的颜色选择器如何根据输入的RGB颜色计算光标位置？

Question

我正在使用HTML5画布实现颜色选择器。与Chrome DevTools具有相同的种类。

当用户通过输入插入值时，如何在两个画布上还原光标？

Answer 1

1. 需要HSL（色相，饱和度，亮度）
2. 将输入值RGB转换为HSL（RGB to HSL conversion）
3. 图片中的滑块代表Hue值
4. 调色板从上到下分别代表Lightness 0％〜100％；从左到右分别代表Saturation 0％〜100％