使用javascript在css中生成更浅/更深的颜色 [英] Generate lighter/darker color in css using javascript

问题描述

假设我有＃404040颜色代码。如何生成一个新的颜色代码是更浅或更暗20％（或给定x％）？我需要这是为了在动态网站中生成悬停颜色（其中颜色正在使用主题更改）。因此，不可能使用另一个类或：使用预定义类悬停。

感谢

解决方案

  var pad = function（num，totalChars）{
 var pad ='0'; 
 num = num +''; 
 while（num.length< totalChars）{
 num = pad + num; 
} 
 return num; 
}; 
 
 //比率在0和1之间
 var changeColor = function（color，ratio，darker）{
 //修剪尾随/前导空格
 color = color .replace（/ ^ \s * | \s * $ /，''）; 
 
 //展开三位数十六进制
 color = color.replace（
 / ^＃？（[a-f0-9]）（[a-f0-9] ）（[a-f0-9]）$ / i，
'＃$ 1 $ 1 $ 2 $ 2 $ 3 $ 3'
）; 
 
 //计算比率
 var difference = Math.round（ratio * 256）*（darker？-1：1），
 //确定输入是RGB ）
 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，
 
 //十六进制转换为十进制
 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; 
 
 //返回RGB（A）
 return !! rgb？ 
'rgb'+（alpha！== null？'a'：''）+'（'+ 
 Math [darker？'max'：'min']（
 parseInt十进制[0]，10）+差分，更暗→0：255 
）+'，'+ 
 Math [darker？'max'：'min']（
 parseInt 1]，10）+ difference，darker？0：255 
）+'，'+ 
 Math [darker？'max'：'min']（
 parseInt（decimal [ ，10）+ difference，darker？0：255 
）+ 
（alpha！== null？'，'+ alpha：''）+ 
'）'：
 // Return hex 
 [
'＃'，
 pad（Math [darker？'max'：'min']（
 parseInt（decimal [0]，10）差别，更深？0：255 
）.toString（16），2），
 pad（Math [darker？'max'：'min']（
 parseInt（decimal [ ，10）+ difference，darker？0：255 
）.toString（16），2），
 pad（Math [ '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）; 
}; 
 
 //使用
 var darker = darkerColor（'rgba（80，75，52，.5）'，.2）; 
 var lighter = lighterColor（'rgba（80，75，52，.5）'，.2）; 
 

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


let say I have #404040 color code. How to generate a new color code which is either lighter or darker by 20% (or given x%)? I need this for generate a hover color in a dynamic site (which color is changing using theme). Therefore it is not possible to use another class or :hover with predefined class.

Thanks

解决方案

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);

Now handles RGB(A) input, as well as hex (3 digit or 6).

这篇关于使用javascript在css中生成更浅/更深的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！