Obtenir une couleur plus sombre ou plus claire pour CSS [javascript]

EDIT du 22/05/2012 : il existe un site qui permet de trouver plusieurs dégradés à partir d'une couleur, et ça se passe sur http://0to255.com/
EDIT du 20/09/2012 : et voilà encore un autre site un peu plus intéressant que le précédent http://sassme.arc90.com/
EDIT du 25/09/2012 : une autre fonction/méthode plus légère est disponible tout en bas du billet

Voici un petit outil en ligne qui permet d'avoir une couleur plus claire ou plus sombre en se basant sur une couleur CSS et en demandant un pourcentage (exprimé entre 0 et 1) à appliquer :

Couleur CSS:
Pourcentage à appliquer:
plus sombreplus claire

Résultat:

Cette fonction vient directement de stackoverflow.com :

var pad = function(num, totalChars) {
    var pad = '0';
    num = num + '';
    while (num.length < totalChars) {
        num = pad + num;
    }
    return num;
};

// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
    // Trim trailing/leading whitespace
    color = color.replace(/^\s*|\s*$/, '');

    // Expand three-digit hex
    color = color.replace(
        /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
        '#$1$1$2$2$3$3'
    );

    // Calculate ratio
    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
        // Determine if input is RGB(A)
        rgb = color.match(new RegExp('^rgba?\\(\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '(?:\\s*,\\s*' +
            '(0|1|0?\\.\\d+))?' +
            '\\s*\\)$'
        , 'i')),
        alpha = !!rgb && rgb[4] != null ? rgb[4] : null,

        // Convert hex to decimal
        decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
            /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
            function() {
                return parseInt(arguments[1], 16) + ',' +
                    parseInt(arguments[2], 16) + ',' +
                    parseInt(arguments[3], 16);
            }
        ).split(/,/),
        returnValue;

    // Return RGB(A)
    return !!rgb ?
        'rgb' + (alpha !== null ? 'a' : '') + '(' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ) +
            (alpha !== null ? ', ' + alpha : '') +
            ')' :
        // Return hex
        [
            '#',
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ).toString(16), 2)
        ].join('');
};
var lighterColor = function(color, ratio) {
    return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
    return changeColor(color, ratio, true);
};

// Use
var darker = darkerColor('rgba(80, 75, 52, .5)', .2);
var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);

Une autre méthode, plus légère, inspirée par stackoverflow:

function LightenDarkenColor(col,amt,usePound,num,f,h,r,b,g) {
  if (col[0]=="#") {
    col = col.slice(1);
    usePound = (usePound==undefined?true:usePound)
  }

  num = parseInt(col,16);
  f=function(n) { return n>255?255:(n<0?0:n) }
  h=function(n) { return n.length<2?"0"+n:n }
  
  r = h(f((num >> 16) + amt).toString(16));
  b = h(f(((num >> 8) & 0x00FF) + amt).toString(16));
  g = h(f((num & 0x0000FF) + amt).toString(16));

  return (usePound?"#":"") + r + b + g;
}

LightenDarkenColor("#FAB787",10);
LightenDarkenColor("#FAB787",-15);
LightenDarkenColor("FAB787",5,true);