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)混为一谈,则斜线给我<代码>[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]));

它给我打绿灯,而不是绿灯。为什么发生这种情况?

Answer 1

Because you are calculating resulting color as the arythmetic average of two base colors.

视你混合的情况,有色人种的工作方式不同。如果你混杂许多不同颜色的油漆,结果将是黑暗的,几乎是黑的。但是,如果你混淆不同颜色的灯,结果几乎是白人。首先界定了你想要模拟的过程——我不认为是类似于混合油漆的过程?

Two basic methods of mixing colors are:

sub mix mix
additive mixing, which looks like that:

你们需要的是细化彩混合,其产出应载于RGB。

Answer 2

您需要将你的彩色转换成HSL或HSV彩色模型(此处或谷歌的样本类型),例如,该页。

然后,你与由此产生的数字做比较,然后转而改换为罗姆妇女。

这将确保饱和和和光明保持连贯性,并使你在两个原始颜色之间有分的正确hu。

Using the library linked above:

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: this is untested code (the algorithm is correct, I just didn t actually throw it at an interpreter yet), and the results may need to be rounded. However for bonus points it also allows you to specify a mix proportion other than 50/50.

Answer 3

这里的两个主要问题:

additive versus subtractive mixing - that s easy to read about

但我认为,主要问题是,蓝色和黄色油漆不会绿化。你们所想的蓝色实际上不是蓝色:更多的是yan或至少是某种绿色转变的蓝色。

纯“蓝色”既不是温暖的(向红色)或冷却(向黄色/绿化),油漆中则像超海洋红.——纯蓝色,但你会认为很黑暗(几乎是海军)蓝色。

当油漆与黄色混杂时,你不会有光明的绿色,更多的是灰色。在油漆中,从混合体中取出光明的颜色,必须使用不同颜色的颜色,但事实上尽可能接近,因此,事实上,只有把绿蓝与绿黄色混为一谈,才能在油漆中取得光明的绿色。他们是邻国。

绿色仍然不会像单纯的绿色一样光明。不能以轻率(穿孔混合)来做到这一点——将颜色混为一谈,获得新纯颜色只能用有色的光灯进行。添加混杂剂,正如你在剧院看到的那样。

However be aware that additive mixing is somewhat counter-intuitive - instead of your subtractive paint blue/yellow mix giving a neutral gray (black in theory) in fact with lights you would get white .... (still not green!).

It is a very complex field because there is also some psychology and physiology involved - our brains cheat or mistake color perception on a regular basis. eg. you mix black with yellow you get a dark green - that is related to the sensitivity or the red / green cones as the brightness decreases - it is in fact dark yellow but we see green.

Answer 4

To get what you expect you need to work in CMY space instead of RGB space.

在这里,一个简单的RGB-CMY转化器:

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

And simply reverse the process to convert back to RGB:

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

(如果你真心要注意,你就会认识到这两项职能都是相同的)。

Answer 5

I think your formula works fine, it is what, say, photoshop would do if you put blue next to yellow and apply a blur...you d get gray right in the middle. Blue and yellow don t mix to make green. Red, green, and blue are primaries on computer monitors, camera film and the human eye.

同时,黄色是红灯和绿灯的一种混合物,即,在你看到黄色时刺激了你眼中的红色和绿色敏感。这似乎并非是直观的,而是真实的。在 magn玻璃下,看看一黄色的屏幕,看看看一看,有红树和绿树。

This is in contrast to what you may have learned in elementary school, and sometimes mixing paints or inks may end up with blue and yellow making a (typically muddy) green. So, I don t suggest you change your algorithm, that is a standard way of blending two colors together. Just change your expectations. :)

友情链接