使用JavaScript在CSS中生成较浅较深的颜色

使用JavaScript在CSS中生成较浅/较深的颜色

var pad = function(num, totalChars) {    var pad = '0';    num = num + '';    while (num.length < totalChars) {        num = pad + num;    }    return num;};// Ratio is between 0 and 1var 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,        '#'    );    // 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);};// Usevar darker = darkerColor('rgba(80, 75, 52, .5)', .2);var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);

现在处理RGB（A）输入以及十六进制（3位数或6）。