Java Script: How Can I Pull The Hsl Value When A Colour Is Selected From Input Type = 'color'?

I am so blank on this idek where to start. I am trying to make functions that will manipulate the H S L values once I get them. Mainly the light value, which is why I need it in H

Solution 1:

You can't get the HSL representation of the color from the input element directly. Using .value gives you a hex code, which you can then convert to HSL.

I found the function to convert hex to HSL here.

functiongetColor() {
    let input = document.querySelector('#usr-clr')
    let color = HexToHSL(input.value)
    
    console.log('hsl(' + color.h + ', ' + color.s + '%, ' + color.l + '%)')
}

functionHexToHSL(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) {
            caser: h = (g - b) / d + (g < b ? 6 : 0); break;
            caseg: h = (b - r) / d + 2; break;
            caseb: 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};
}

<inputtype="color"id="usr-clr"onChange="getColor()">