该死的颜色选择器！！ - WXOPEN Club | 微信小程序专业社区

目标

看到这个很酷的网站所以也想看看怎么弄？

先来挑战入门版…

颜色坐标系

首先要解决一个 误解



![](https://image.wxopen.club/content_cca30b5c-3165-11eb-902b-001a7dda7111.gif)



我们所看到的颜色面板, 其实就是一个固定的样式, 而我们获取的颜色其实是从 坐标模型中 计算出来的。

坐标模型有很多, 在此使用的是 <a href="https://baike.baidu.com/item/HSV%E9%A2%9C%E8%89%B2%E6%A8%A1%E5%9E%8B/21501482" rel="noopener" target="_blank">HSV颜色模型</a>



Q: 为什么使用 HSV ?  
A: HSV色系对用户来说是一种直观的颜色模型, 主要由 __色调(Hue, 简H)、饱和度(Saturation, 简S)、色明度(Value, 简V)__

将 HSV六角锥体模型 转为 直观的数学坐标系



![](https://image.wxopen.club/content_cccd3e1c-3165-11eb-b223-001a7dda7111.png)



__需要注意, document中元素节点 坐标原点是右上角, 而数学坐标原点为右下角__



__数学坐标系: y、x、h__



__HSV坐标系: v、s、h__

确认坐标系的范围



__色调H: 取值范围为0°～360°__



__饱和度S：取值范围为0.0～1.0__



__亮度V：取值范围为0.0(黑色)～1.0(白色)__



__通过document节点上元素的宽高, 计算步长, 达到取值范围为 0～100(转为百分制)__

颜色转换

通过触摸坐标系获取 y(v)、x(s)、h 的值, 然后利用算法公式转换成 rgb 颜色

<a href="https://www.rapidtables.com/convert/color/hsv-to-rgb.html" rel="noopener" target="_blank">hsv转rgb公式</a>

<a href="https://www.rapidtables.com/convert/color/rgb-to-hsv.html" rel="noopener" target="_blank">rgb转hsv公式</a>

还有 rgb转hex、 rgb转hsl; 都在<a href="https://www.rapidtables.com/convert/color/" rel="noopener" target="_blank">这里</a>

实例用法

详细注释在代码中…

代码片段: https://developers.weixin.qq.com/s/Zc7qb9m77EmE
github: https://github.com/angxuejian/moto.wxui/tree/main/UI/colorPicker

1. 将 colorPicker 组件引入到项目中。

// index.json

{
  "usingComponents": {
    "color-picker": "../../components/colorPicker/colorPicker"
  }
}

// index.html

<view>

 <color-picker></color-picker>

</view>