lighten darken colors

by J. Jones

HTML

<button id='foo' onclick='clearConsole();'>clear console</button>
<button id='foo2' onclick='lightenColor();'>lighten</button>
<button id='foo2' onclick='darkenColor();'>darken</button>
<div id="console">console log type thing</div>
<p>
    <div id="thing">some text</div>

CSS

#thing {
    background-color:lightblue;
}

JavaScript

function lightenColor() {
    var rgb = $(thing).css('background-color');
    var lighterRgb = alterColor(rgb, 20, true);
    $(thing).css('background-color', lighterRgb);
}

function darkenColor() {
    var rgb = $(thing).css('background-color');
    var darkerRgb = alterColor(rgb, 20, false);
    $(thing).css('background-color', darkerRgb);
}

function clearConsole() {
    $('#console').html(" ");
}

function log(msg) {
    var oldmsg = $('#console').html();
    var newmsg = oldmsg + "<br>" + msg;
    $('#console').html(newmsg);
}


function rgb2hsl(rgbin) {
    var rgb = rgbin.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    var dred = rgb[1]; ///255.0;
    var dgreen = rgb[2]; ///255.0;
    var dblue = rgb[3]; ///255.0;
    return rgbToHsl(dred, dgreen, dblue);
}

function rgbToHsl(r, g, b) {
    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) {
            case r:
                h = (g - b) / d + (g < b ? 6 : 0);
                break;
            case g:
                h = (b - r) / d + 2;
                break;
            case b:
                h = (r - g) / d + 4;
                break;
        }
        h /= 6;
    }
    var ret = "hsl(" + h + ", " + s + ", " + l + ")";
    return ret;
}

function clamp01(val) {
    return Math.min(1, Math.max(0, val));
}

function alterColor(rgbin, amount, lighter) {
    var hslin = rgb2hsl(rgbin);
    var hsl = hslin.match(/^hsl\(([\.\d]+),\s*([\.\d]+),\s*([\.\d]+)\)$/);
    var hue = parseFloat(hsl[1]);
    var sat = parseFloat(hsl[2]);
    var l = parseFloat(hsl[3]);
    amount = (amount === 0) ? 0 : (amount || 10);
    if (lighter) {
        l += amount / 100;
    } else {
        l -= amount / 100;
    }
    l = clamp01(l);
    var ret = hslToRgb(hue, sat,...