Color adjustment

by kapantzak

HTML

<div id="colorWrapper">
    <span>test</span>
</div>

    Color: <span id="in"></span>
    <br/>
    Brightness: <span id="br"></span>
    <br/>
    Brightness Final: <span id="fn"></span>
    <br/>
    Opacity: <span id="op"></span>

CSS

#colorWrapper {
    width: 200px;
    height: 100px;
    padding-top: 40px;
    text-align: center;
}

#colorWrapper span {
    width: 100%;
    float: left;
    font-size: 20px;
}

span.darkCl {
     color: #fff;   
}
span.lightCl {
     color: #000;   
}

JavaScript

var colorAdjust = function() {
    colorWrapper = $('#colorWrapper');
    span = colorWrapper.find('span');
    
    var color = colorWrapper.css('background-color');
    var reg = color.match(/\(.*?\)/g);
    
    var regStr = reg.toString().replace(/ /g, '').replace(/\(|\)/g, '');
    var regStrLength = regStr.length;
    var regStrFn = regStr.substr(0, regStrLength).split(',');    //array
        var regR = regStrFn[0];
        var regG = regStrFn[1];
        var regB = regStrFn[2];
        var regOp = '';
    
        if(regStrFn[3]) {
            var regOp = regStrFn[3];
        } else {
            var regOp = 1;
        }
    
        var brightness = (0.375 * regR) + (0.5 * regG) + (0.125 * regB);
       
    if (regOp > 0.4) {
        var brightnessFn = brightness;
    } else {
        var brightnessFn = 255;
    }
    
    if (brightnessFn < 125) {
        span.removeClass('lightCl').addClass('darkCl');
    } else {
        span.removeClass('darkCl').addClass('lightCl');
    }
    
    $('span#in').html(color);
    $('span#br').html(brightness);
    $('span#fn').html(brightnessFn);
    $('span#op').html(regOp);
}

colorAdjust();