Codly

html

<div id='picker_wrapper'>
            <div id='result'><div id='result_color'></div></div>
            <input type='text' id='copy_color' value='rgba(92, 148, 239, 0.7)'>
            <div id='color_edit'>
                <input min="0" max="255" value="96" step="1" type='range' class='range1' id='color'>
                <input min="0" max="255" value="150" step="1" type='range' class='range2' id='color'>
                <input min="0" max="255" value="237" step="1" type='range' class='range3' id='color'>
                <input min="0" max="1" value="0.7" step="0.01" type='range' class='range4' id='color'>
            </div>
        </div>

css

*{
    margin: 0;
    padding: 0;
}
body{
    background: #f0f0f0;
}
#picker_wrapper{
    width: 170px;
    background: #fff;
    padding: 10px;
    margin: 10px auto;
    box-shadow: 0px 0px 80px -40px #636363;
}
.range1,.range2,.range3,.range4{
    display: block;
    margin: auto;
}
#result{
    margin: 10px auto;
    width: 150px;
    height: 150px;
    background: url('http://image.prntscr.com/image/b109bcf091e84cb5aeec781b0466cd79.jpg');
    background-size: cover;
    box-shadow: inset 0px 0px 100px -40px #000;
}
#result_color{
    height: 150px;
    background: rgba(92, 148, 239, 0.7);
}
#copy_color{
    width: 140px;
    padding: 3px;
    margin: 4px auto;
    display: block;
}

$('#color_edit').on('input', function(){
    var input1 = $('.range1').val();
    var input2 = $('.range2').val();
    var input3 = $('.range3').val();
    var input4 = $('.range4').val();
    var colors = "rgba("+input1+","+input2+","+input3+","+input4+")";
    $('#result_color').css('background-color', colors);
    $('#copy_color').attr('value', colors);
    $('#picker_wrapper').css('box-shadow', "0px 0px 80px -40px #636363,0px 0px 80px -30px " + colors);
});