使顏色更紅，綠等最佳值？

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），這當然不是你想要的。

A 正確解決方案在這種情況下很難給出，因爲它取決於美學和你想達到的效果。當圖像藝術家在像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）。