使颜色更红、绿等的最佳值

Question

给定图片的RGB像素映射，什么是好的和有意义的值，使图片更红，绿色，蓝色，青色，洋红色或黄色？

目前在我的 JavaScript 代码中，我有以下 RGB 变化值，但我想知道是否有基于颜色理论 的更优化的比例——例如，对于更多的红色，我使用 rgb（+45，-27，-27），但我不太确定例如 -27。

var strength = 45;
var strengthLess = strength - 18;
this.changeColorModes = {
        'moreRed'   : {r: strength, g: -strengthLess, b: -strengthLess},
        'moreGreen' : {r: -strengthLess, g: strength, b: -strengthLess},
        'moreBlue'  : {r: -strengthLess, g: -strengthLess, b: strength},
        'moreCyan'  : {r: -strengthLess, g: strengthLess, b: strengthLess},
        'moreMagenta'  : {r: strengthLess, g: -strengthLess, b: strengthLess},
        'moreYellow'  : {r: strengthLess, g: strengthLess, b: -strengthLess}
        };

Answer 1

RGB 值上限为 255。那么，当您执行此操作时，RGB 值（240、10、10）会发生什么？它会变成 （285， -35， -35），然后溢出到 （29， 221， 221），这当然不是你想要的。

在这种情况下，很难给出正确的解决方案，因为它取决于美学以及您想要达到的效果。当图形艺术家在图像处理程序（如 Photoshop）中对图像进行颜色校正时，他们通常会编辑每个通道的曲线并使它们或多或少地陡峭，这是对该颜色通道值的乘法运算。因此，当您想使图像"红色增加 20%"时，我会将所有红色值乘以 1.2，并将 255 以上的所有内容设置为 255 以避免溢出。为了使图像"减少 20% 的青色"（与红色相反），我将所有绿色和蓝色值乘以 0.8。

Answer 2

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 位）。