如何使用 JavaScript 生成特定百分比的更亮/更暗的 CSS 颜色 [英] How to generate a CSS color that is some specific percentage lighter/darker using JavaScript

问题描述

假设我的颜色为 #404040.我怎样才能生成一个新的颜色十六进制代码，它要么更亮要么更暗 20%(或另一个给定的百分比)?我需要它来生成颜色以在悬停时应用.

Let's say I have a color of #404040. How can I generate a new color hex code which is either lighter or darker by 20% (or another given percentage)? I need this for generating a color to apply on hover.

所应用的颜色会根据所选主题而变化，因此无法使用其他类或具有预定义颜色值的 :hover.

The color being applied changes based on the chosen theme, therefore it is not possible to use another class or :hover with a predefined color value.

推荐答案

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

现在处理 RGB(A) 输入以及十六进制(3 位或 6 位).

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

这篇关于如何使用 JavaScript 生成特定百分比的更亮/更暗的 CSS 颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！