Java 脚本：当从输入类型 = 'color' 中选择颜色时，如何提取 HSL 值？

Question

我不知道从哪里开始。

我正在尝试制作函数，一旦我得到它们就会操纵 H S L 值。主要是光值，这就是为什么我需要它的 HSL 格式。

所以一旦我得到它，我想创建

var h = ;
var s = ;
var l = ;

所以我可以让函数来操纵每一个

从type='color'弹出选择，一次选择一个颜色；它确实在底部显示了它的 RGB 值，箭头将其更改为十六进制或 HSL - 我想要的。所以我知道信息在那里，我只是不知道如何获取它enter image description here

Answer 1

您无法直接从输入元素中获取颜色的 HSL 表示。使用 .value 给你一个十六进制代码，然后你可以将其转换为 HSL。

我找到了将十六进制转换为 HSL 的函数。

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()">

Java 脚本：当从输入类型 = 'color' 中选择颜色时，如何提取 HSL 值？

Java Script: How can i pull the HSL value when a colour is selected from input type = 'color'?

javascript

hsl

colors