我不知道从哪里开始。
我试图制作函数，一旦我得到H，S，L值，就会对它们进行操作。 主要是光值，这就是为什么我需要它的HSL格式。
所以一旦我得到了它，我最理想的是创造
var h = ;
var s = ;
var l = ;
所以我可以用函数来操作每一个
从type='color'弹出选择中，一旦选择了颜色； 它确实在底部显示它的RGB值，用箭头将它改为十六进制或HSL--这是我想要的。 所以我知道信息在那里，我只是不知道如何让它在这里输入图像描述
您不能直接从输入元素获得颜色的HSL表示。 使用.value可以提供十六进制代码，然后可以将其转换为HSL。
我在这里找到了将十六进制转换为HSL的函数。
null
function getColor() {
let input = document.querySelector('#usr-clr')
let color = HexToHSL(input.value)
console.log('hsl(' + color.h + ', ' + color.s + '%, ' + color.l + '%)')
}
function HexToHSL(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
var r = parseInt(result[1], 16);
var g = parseInt(result[2], 16);
var b = parseInt(result[3], 16);
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
s = s*100;
s = Math.round(s);
l = l*100;
l = Math.round(l);
h = Math.round(360*h);
return {h, s, l};
}<input type="color" id="usr-clr" onChange="getColor()">