获取javascript中的实际颜色选择器颜色

我想创建一个颜色选择器。如何将用户单击的x/y坐标转换为实际的rgb/hsv/hex/etc颜色

代码如下：

//jshint-esnext:true 常量调色板=document.getElementsByClassName'fill-color-palette'[0] palette.addEventListener“单击”，事件=>{ const x=event.clientX-palete.offsetLeft const y=event.clientY-palete.offsetTop console.logx，y } .电网{ 显示：网格； 填充物：5px； 网格模板列：1fr 15px 15px； 柱间距：10px； } .填充调色板{ 位置：相对位置； 高度：160px； 边界半径：3px； 背景图像：线性梯度RGB0，0，0，0，000，线性梯度向右，FFF，rgb255，255，255，0； } .填充颜色色调{ 位置：相对位置； 宽度：15px； 高度：160px； 背景：底部线性梯度，rgb255，0，0，rgb255，0，255，rgb0，0，255，rgb0，255，255，rgb0，255，255，0，rgb255，255，0，rgb255，0，0； 边界半径：3px； } .填充颜色alpha{ 位置：相对位置； 宽度：15px； 高度：160px； 背景：线性渐变至底部，rgb0，0，0 0%，透明100%0%0%无重复局部，urldata:image/png；base64，IVBorW0KggoaansuhueugaaaaBaaAaAaAaAaAaAaAaGqRfWhrtB2Z0D2FYZQQBbZG9IZSBwWfNzVjlYWr5CllPaaCcPjRefuenpI3LFJBWM2OK2TJVvCiyFemEqKK7YVxR06GKW0AaAaAaAaAaBjRuKgKgK5KgKgKgKgKfKfKfKfKfK7Yg0=重复局部； 边界半径：3px； } .别针{ 位置：绝对位置； 宽度：15px； 高度：15px； 边界：无； 边界半径：11px； 背景色：FFF； 盒影：rgb51,51,51 0px 0px 0px 1px插图，rgb51,51,51 0px 0px 0px 1px； 光标：指针； } .pin.active{ 宽度：11px； 高度：11px； 边框：2个实心FFF； 背景色：透明； }

---

事实上我发现很容易得到颜色。您需要HSV颜色，其中色调为0红色，饱和度和值通过将x/y除以宽度/高度来计算。拥有HSV颜色后，可以使用自定义功能将其转换为RGB，以便在浏览器中实际显示

这是密码。您可以单击管脚选择其他色调/alpha值

const current=document.getElementById'current' 常量调色板=document.getElementsByClassName'fill-color-palette'[0] const colorPin=palete.getElementsByClassName'pin'[0] const hueSlider=document.getElementsByClassName'fill-color-hue'[0] const huePin=hueSlider.getElementsByClassName'pin'[0] 常量alphaSlider=document.getElementsByClassName'fill-color-alpha'[0] 常量alphaPin=alphaSlider.getElementsByClassName'pin'[0] palette.addEventListener“单击”，事件=>{ const x=event.clientX-palete.offsetLeft const y=event.clientY-palete.offsetTop const width=palete.clientWidth const height=palete.clientHeight 常数饱和=x/宽度 常量值=高度-y/高度 const hue=hueSlider.dataset.value | | 0 常数alpha=alphaSlider.dataset.value | | 1 //更新pin码 colorPin.style.left=x+‘px’ colorPin.style.top=y+“px” //设置颜色 常量颜色=HSVtoRGBhue、饱和度、值 current.textContent=`${color.r}，${color.g}，${color.b}，${alpha}` current.style.backgroundColor=`rgb${current.textContent}` } hueSlider.addEventListener“单击”，事件=>{ 常数y=event.clientY-hueSlider.offsetTop 常数高度=hueSlider.clientHeight 常量色调=浮动/高度 //更新pin码 huePin.style.top=y+'px' //更新调色板 const color=HSVtoRGBhue，1，1 palete.style.backgroundColor=`rgb${color.r}，${color.g}，${color.b}` //设置色调 hueSlider.dataset.value=色调 } alphaSlider.addEventListener“单击”，事件=>{ 常量y=event.clientY-alphaSlider.offsetTop 常数高度=alphaSlider.clientHeight 常数alpha=高度-y/高度 //更新pin码 alphaPin.style.top=y+'px' //设定阿尔法 alphaSlider.dataset.value=alpha } 函数HSVtoRGB色调、饱和度、值{ 设r，g，b 常数i=Math.floorhue*6 常数f=色调*6-i 常数p=值*1-饱和 常数q=值*1-f*饱和度 常数t=值*1-1-f*饱和度 开关i%6{ 案例0： r=值 g=t b=p 打破 案例1： r=q g=值 b=p 打破 案例2： r=p g=值 b=t 打破 案例3： r=p g=q b=值 打破 案例4： r=t g=p b=值 打破 案例5： r=值 g=p b=q 突破 } 返回{ r:Math.roundr*255， g:Math.roundg*255， b:Math.roundb*255 } } .电网{ 显示：网格； 填充物：5px； 网格模板列：1fr 15px 15px； 柱间距：10px； } .填充调色板{ 位置：相对位置； 高度：160px； 边界半径：3px； 背景图像：线性梯度RGB0，0，0，0，000，线性梯度向右，FFF，rgb25 5, 255, 255, 0; } .填充颜色色调{ 位置：相对位置； 宽度：15px； 高度：160px； 背景：底部线性梯度，ff0000 0%，ffff00 17%，00ff00 33%，00ffff 50%，0000ff 67%，ff00ff 83%，ff0000 100%； 边界半径：3px； } .填充颜色alpha{ 位置：相对位置； 宽度：15px； 高度：160px； 背景：线性渐变至底部，rgb0，0，0 0%，透明100%0%0%无重复局部，urldata:image/png；base64，IVBorW0KggoaansuhueugaaaaBaaAaAaAaAaAaAaAaGqRfWhrtB2Z0D2FYZQQBbZG9IZSBwWfNzVjlYWr5CllPaaCcPjRefuenpI3LFJBWM2OK2TJVvCiyFemEqKK7YVxR06GKW0AaAaAaAaAaBjRuKgKgK5KgKgKgKgKfKfKfKfKfK7Yg0=重复局部； 边界半径：3px； } .别针{ 位置：绝对位置； 宽度：15px； 高度：15px； 边界：无； 边界半径：11px； 背景色：FFF； 盒影：rgb51,51,51 0px 0px 0px 1px插图，rgb51,51,51 0px 0px 0px 1px； 光标：指针； } .pin.active{ 宽度：11px； 高度：11px； 边框：2个实心FFF； 背景色：透明； } 当前{ 宽度：120px； 高度：20px； 保证金：5px； 边界半径：3px； 边框：1px000； }

---

你为什么不使用？我不确定这是真的。只需使用一些简单的颜色picker@connexo我需要一个自定义的UI应用程序和输入颜色太一般我看了从光谱的代码，似乎它采取了一个坐标，设置为当前色调，然后使用tinycolor.fromRatio获得一个平面颜色，然后将其转换为十六进制。但我真的不明白这一切是如何运作的。也许有人有更多的知识可以给我一些提示。你不能使用一个常规的HTML元素，你需要一个画布来工作。