爲什麼我的混色功能不能按預期工作？

Question

我有這個函數需要兩個參數。它們是[r, g, b]格式的數組。

function mix(color1, color2) 
{ 
    var r = Math.round((color1[0] + color2[0])/2); 
    var g = Math.round((color1[1] + color2[1])/2); 
    var b = Math.round((color1[2] + color2[2])/2); 

    return [r, g, b]; 
} 

如果我嘗試混合紅色（255，0，0）和藍色（0，0，255），TT給我[128,0,128]，這是紫色的。但如果我嘗試混合藍色（0，0，255），和黃（255，255，0）

console.log(mix([255,0,0], [0,0,255])); 
console.log(mix([255,255,0], [0,0,255])); 

它給了我灰色[128, 128, 128]，而不是綠色。這是爲什麼發生？

Answer 1

因爲您計算的結果顏色是兩種基本顏色的芳香性平均值。

顏色以不同的方式工作，具體取決於您的混合。如果混合多種不同顏色的塗料，結果會變黑，幾乎變黑。但是如果你要混合不同顏色的燈光，結果幾乎是白色的。首先定義你想要模擬的過程 - 我敢打賭，它是類似於混合塗料的那個，對嗎？混合顏色的

兩種基本的方法是：

• 減色混合，這看起來像這樣：

  

• 添加劑混合，這看起來像這樣：

  

您需要的是減色混色，其輸出應爲RGB表示法。

Answer 2

您需要將您的顏色轉換爲HSL或HSV顏色模型（此處或Google上有大量樣本，例如this page）。

然後，您可以對結果數字進行平均，然後再轉換回RGB。

這將確保飽和度和亮度保持一致，併爲您提供兩種原始顏色之間的一半的正確色調。

function mix(color1, color2, amount) 
{ 
    if (typeof amount === "undefined") { 
     amount = 0.5; 
    } 

    var hsl1 = rgbToHsl.apply(this, color1); 
    var hsl2 = rgbToHsl.apply(this, color2); 

    var h = amount * hsl1[0] + (1 - amount) * hsl2[0]; 
    var s = amount * hsl1[1] + (1 - amount) * hsl2[1]; 
    var l = amount * hsl1[2] + (1 - amount) * hsl2[2]; 

    return hslToRgb(h, s, l); 
} 

NB：

使用上面鏈接庫，這是未經測試的代碼（該算法是正確的，我只是沒有真正在解釋它扔還），結果可能需要圓潤。但是，對於獎勵積分，它還允許您指定50/50以外的混合比例。

Answer 3

爲了得到您所期望的，您需要在CMY空間而不是RGB空間中工作。

這裏有一個簡單的RGB到CMY轉換器：

function rgb2cmy (r, g, b) { 
    var c = 255-r; 
    var m = 255-g; 
    var y = 255-b; 
    return [c,m,y]; 
} 

而簡單地恢復過程轉換回RGB：

function cmy2rgb (c, m, y) { 
    var r = 255-c; 
    var g = 255-m; 
    var b = 255-y; 
    return [r,g,b]; 
} 

（如果你一直在關注，你就會明白這兩個功能都做同樣的事情）

Answer 4

我認爲你的公式工作正常，這是什麼，比如說，如果你將藍色ne xt變黃並塗抹模糊......你會在中間變灰。藍色和黃色不會混合成綠色。紅色，綠色和藍色是計算機顯示器，相機膠片和人眼的初選。

與此同時，黃色是紅色和綠色光的混合物，也就是說，當你看到黃色時，紅色和綠色敏感的視錐會刺激你的眼睛。它可能看起來並不直觀，但這是事實。在放大鏡下查看屏幕上的黃色區域，您會看到它由紅色和綠色點組成。

這與您在小學中學到的東西形成了對比，有時混合塗料或油墨可能會以藍色和黃色爲主（通常是泥濘的）綠色。所以，我不建議你改變你的算法，這是一種將兩種顏色混合在一起的標準方法。只是改變你的期望。 :)這裏

Answer 5

2個主要問題：

與添加劑混合消減 - 這是很容易瞭解

但我認爲，主要問題是，藍色和黃色油漆不做綠色。你會想到的藍色類型實際上並不是藍色：更多的是青色或至少藍色，並且有一些綠色的變化。

純藍色既不是溫暖的（朝着紅色），也不是涼爽的（朝着黃色/綠色），而在油漆中就像羣青紅色的陰影 - 一種純粹的藍色，但你會認爲是相當黑暗（幾乎藏青色）的藍色。

當在油漆中混合黃色時，你不會得到鮮綠色，更暗淡的灰色。在油漆中獲得混合光亮的油漆顏色，必須使用色輪上彼此不相交的顏色，但實際上儘可能接近理想的顏色，因此鮮綠色實際上只能在油漆中獲得從混合綠色的藍色和綠色的黃色 - 即。他們是鄰居。

綠色仍然不會像純綠色一樣明亮。這不能用減法（油漆混合）來完成 - 要組合顏色並獲得新的純色只能用彩色燈光完成 - 即。添加劑混合，就像你在劇院看到的一樣。

但是請注意，添加劑混合有點違反直覺 - 而不是您的減色油漆藍色/黃色混合提供中性灰色（理論上黑色）實際上燈會變白......（仍不是綠色！）。

這是一個非常複雜的領域，因爲也涉及到一些心理學和生理學 - 我們的大腦欺騙或錯誤的色彩感知定期。例如。你將黑色和黃色混合在一起就會得到深綠色 - 這與感光度或紅/綠色錐體有關，因爲亮度降低 - 實際上它是深黃色，但是我們看到綠色。