Gradient generator

by Ronny

HTML

<button id="textColor">Toggle Text Color</button>
<fieldset id="from">
    <legend>Start Color</legend>
<input type="range" id="fromHue" step="1" min="0" max="60" value="0" title="hue">
<input type="range" id="fromSaturation" step="1" min="0" max="100" value="100" title="saturation">
<input type="range" id="fromLightness" step="1" min="0" max="100" value="50" title="lightness">
</fieldset>

<fieldset id="to">
    <legend>End Color Diff</legend>
<input type="range" id="toHueDiff" step="1" min="0" max="360" value="0" title="hue">
<input type="range" id="toSaturationDiff" step="1" min="-100" max="100" value="0" title="saturation">
<input type="range" id="toLightnessDiff" step="1" min="-100" max="100" value="0" title="lightness">
    </fieldset>

<output id="preview">
    <div id="p1"></div>
    <div id="p2"></div>
    <div id="p3"></div>
    <div id="p4"></div>
    <div id="p5"></div>
    <div id="p6"></div>
</output>
<output id="code"></output>

CSS

body {margin: 30px; background: #08212B; color: #fff; font-family: sans-serif;}
fieldset {width: 45%; position: absolute; border: 1px solid #ccc; padding: 0; margin: 0; top: 15px;}
#from {left: 15px;}
#to {right: 15px;}
[type=range] {display: block; width: 95%; border: 1px solid hotpink; margin: 0 10px; padding: 0;}
#textColor {position: absolute; top: 95px; left: 15px; font-size: 12px;}

#preview {position: relative; top: 100px; left: -25px}
#preview div {background: #777; height: 25px; display: block; margin: 10px 30px; font-family: monospace; font-size: 12px; color: black; padding: 5px;}
.brightText #preview div{color: #fff;}
#fromHue {clear: left;}

JavaScript

function refreshColors(ev){
    var from = $('#from').val();
    var to = $('#to').val();
    
    $('#preview div').each(function(i){
        var fromHue =        +$('#fromHue').val();
        var fromSaturation = +$('#fromSaturation').val();
        var fromLightness =  +$('#fromLightness').val();
        
        var toHueDiff =       +$('#toHueDiff').val();
        var toSaturationDiff = +$('#toSaturationDiff').val();
        var toLightnessDiff =  +$('#toLightnessDiff').val();
        
        
        fromHue = fromHue + i * 60;
        if(fromHue > 360) fromHue -= 360;
                
        var toHue =        fromHue + toHueDiff;
        if(toHue > 360) toHue -= 360;
        var toSaturation = Math.min(Math.abs(fromSaturation + toSaturationDiff), 100) + '%';
        var toLightness  = Math.min(Math.abs(fromLightness + toLightnessDiff), 100) + '%';
        
        fromSaturation = fromSaturation + '%';
        fromLightness = fromLightness + '%';
       
        var code = 'background-image: -webkit-linear-gradient(top, hsl(' + fromHue + ', ' + fromSaturation + ', ' + fromLightness + '), hsl(' + toHue + ', ' + toSaturation + ', ' + toLightness + ') );'; 
    $(this).attr('style', code).html(code);
    });
}

$('[type=range]').on('change', refreshColors);
$('#textColor').click(function(){ $('body').toggleClass('brightText'); });
$(refreshColors);