getColorInfo.js

README

Getting hue, lightness and saturation. Under construction.

カラーコードから色相、彩度、明度を抽出。作成中。

jsdoit.css

body {
    background: #fff;
}

jsdoit.html

<script>
    
    window.addEventListener("load", function () {
        console.log(
            getLightnessFromRGB(  100,   100,   100),
            getLightnessFromRGB("100", "100", "100"),
            getLightnessFromHEX("#646464"),
            getLightnessFromHEX("646464"),
            getLightnessFromHEX(646464)
        );
         
        console.log(
            getSaturationFromRGB(    0,     0,     0),
            getSaturationFromRGB(    0,     0,   255),
            getSaturationFromRGB(    0,   225,   255),
            getSaturationFromRGB(  255,   255,   255),
            getSaturationFromRGB("255", "255", "255")
        );
         
        console.log(    
            getSaturationFromHEX("000000"),
            getSaturationFromHEX("0000ff"),
            getSaturationFromHEX("00ffff"),
            getSaturationFromHEX("ffffff")
        );
         
        console.log(
            getHueFromRGB(255,   0,   0),
            getHueFromRGB(0,   255,   0),
            getHueFromRGB(0,     0, 255),
            getHueFromRGB(255,   0, 255),
            getHueFromRGB(191,  64,  66)
        );
    }, false);
    
</script>

jsdoit.js

function getLightnessFromRGB(r, g, b /* no particular order */) {
    return ( Math.max(r, g, b) + Math.min(r, g, b) ) / 510;
    // magic number : 510 = v/2/255
}


// require : getLightnessFromRGB()
function getLightnessFromHEX(HEX) {
    HEX = String(HEX).replace(/#/, "");

    return getLightnessFromRGB(
        parseInt( HEX.slice(0, 2), 16 ),
        parseInt( HEX.slice(2, 4), 16 ),
        parseInt( HEX.slice(4, 6), 16 )
    );

    /* 渡されるのが正数だと保障されているならこちらの方が速い */ /*
    return getLightnessFromRGB(
        +("0x" + HEX.slice(0, 2)),
        +("0x" + HEX.slice(2, 4)),
        +("0x" + HEX.slice(4, 6))
    } */
}


function getSaturationFromRGB(R, G, B /* no particular order */) {
    R /= 255;
    G /= 255;
    B /= 255;

    var max = Math.max(R, G, B),
        min = Math.min(R, G, B),
        lightness = (max + min) / 2;

    if(max == min) return 0;

    var maxMinusMin = max - min;

    return lightness > 0.5 ?
        maxMinusMin / (2 - max - min) :
        maxMinusMin / (max + min);
}


// require : getSaturationFromRGB()
function getSaturationFromHEX(HEX) {
    HEX = String(HEX).replace(/#/, "");
    return getSaturationFromRGB(
        parseInt( HEX.slice(0, 2), 16 ),
        parseInt( HEX.slice(2, 4), 16 ),
        parseInt( HEX.slice(4, 6), 16 )
    );
}


// 要検証
function getHueFromRGB(R, G, B) {
    var max = Math.max(R, G, B),
        min = Math.min(R, G, B),
        maxMinusMin = max - min,
        hue = 0;

    if (!maxMinusMin) return hue;
    
    hue *= 60;

    if(max === R) {
        hue = (G - B) / (maxMinusMin);
    } else if(max === G) {
        hue = (B - R) / (maxMinusMin) + 120;
    } else {
        hue = (R - G) / (maxMinusMin) + 240;
    }
    
    if(hue > 360) hue -= 360;
    if(hue < 0) hue += 360;
    
    return hue;
}


// 要検証  require : getHueFromRGB()
function getHueFromHEX(HEX) {
    HEX = String(HEX).replace(/#/, "");
    return getHueFromRGB(
        parseInt( HEX.slice(0, 2), 16 ),
        parseInt( HEX.slice(2, 4), 16 ),
        parseInt( HEX.slice(4, 6), 16 )
    );
}