logo标签列表

在JavaScript中自然地混合两种颜色

javascriptmathcolorscolor-scheme
45
问题: 我想在Javascript中混合两种颜色，并得到混合后的颜色。虽然stackoverflow上有很多类似的问题，但我没有找到任何实际有效的解决方法。我知道混合两种不同颜色的颜料和光线会产生非常不同的结果(http://en.wikipedia.org/wiki/Color_mixing)。
以下是我已经看到并尝试实现的问题和建议的解决方案: 1: Mixing two RGB color vectors to get resultant
因此，在RGB中混合颜色。我已经实现了它，在某些情况下它有效，在某些情况下则无效。 工作示例: 混合红色和黄色 -> 橙色。太棒了！
http://jsbin.com/afomim/1/edit

不起作用的示例：混合蓝色和黄色 -> 灰色。 不是很好！ :) http://jsbin.com/afomim/5/edit
我知道在RGB混合中，混合蓝色和黄色永远不会得到绿色，我也知道为什么。

我们在这里找不到答案，让我们继续前进。

2：像油漆一样将颜色相加（蓝色+黄色=绿色等）

让我们尝试按照这个讨论建议的CMYK值来工作。将青色与黄色混合会产生绿色:
http://jsbin.com/igaveg/1/edit
但是将蓝色与黄色混合会产生黑色.
http://jsbin.com/igaveg/2/edit ->不起作用！ 3:如何使用C#“自然”混合颜色？
一个非常类似的问题。最受欢迎的答案建议将颜色转换为LAB，这个解决方案似乎很有前途。
所以我将我的颜色转换为LAB。转换算法是正确的，我已经测试过了！

http://jsbin.com/oxefox/1/edit

现在我有两种LAB颜色，但如何混合它们呢？
注意：我知道可能找不到一个算法将蓝色和黄色混合并得到完美的绿色，但我希望能生成类似于绿色的东西 :)
我只是好奇：为什么蓝色和黄色混合会变成绿色（或类似的颜色）？ - Martin R
我所说的蓝色并不完全是#0000ff，黄色也不一定是#ffff00。但在现实世界中，如果你混合一些蓝色和一些黄色，大多数时候你得到的是绿色。这个应用程序：http://www.fiftythree.com/paper（由苹果颁发的奖项）具有一些很棒的颜色混合功能，他们说他们已经研发了一年以上了:)如果你查看他们的页面，你会看到他们对于蓝色和黄色应用了同样的理论。 - Tamás Pap
2
除了死灵术之外，为什么不使用HSL / HSV而不是RGB / CMYK来混合颜色呢？我的意思是，如果可见的颜色光谱只是一个刻度（以nm为单位），那么合并两种色调就是取平均值，饱和度和亮度/价值也是如此。我错了吗？ - NemoStein
12个回答
0
创建您要绘制的元素：
<DIV ID="SWATCH" STYLE="HEIGHT:50PX;WIDTH:50PX;"></DIV>

将您要组合的RGB颜色放入数组中（数量不限）:

var colourArray=['#012345','#6789AB','#CDEFED','#CBA987','#654321'];

接下来将任何字母转换为数字并按顺序捕获它们：

var tempString=[],convertedColourArray=[];
for(i=0;i<colourArray.length;i++){
    for(x=1;x<=6;x++){
        var oldPigment=colourArray[i].charAt(x);
        if(oldPigment<=9)tempString.push(oldPigment);
        if(oldPigment=='A')tempString.push(10);
        if(oldPigment=='B')tempString.push(11);
        if(oldPigment=='C')tempString.push(12);
        if(oldPigment=='D')tempString.push(13);
        if(oldPigment=='E')tempString.push(14);
        if(oldPigment=='F')tempString.push(15);}
    convertedColourArray.push(tempString);
    tempString=[];}

然后将每个索引位置的数字相加：

var colourTotal=0,newColour='#';
for(i=0;i<=5;i++){
    for(x=0;x<convertedColourArray.length;x++)colourTotal+=parseFloat(convertedColourArray[x][i]);

最后，将新数字转换为对应字符并添加到newColour变量中：
    var newPigment=(Math.floor(colourTotal/colourArray.length));
    if(newPigment<=9)newColour+=newPigment;
    if(newPigment==10)newColour+='A';
    if(newPigment==11)newColour+='B';
    if(newPigment==12)newColour+='C';
    if(newPigment==13)newColour+='D';
    if(newPigment==14)newColour+='E';
    if(newPigment==15)newColour+='F';
    colourTotal=0;}

现在你可以用新颜色绘制任何你想要的东西：

    document.getElementById('SWATCH').style.backgroundColor=newColour;

希望这能有所帮助，随意扔鸡蛋 :)

-1

你需要使用CMY或RGB颜色模型。

为什么蓝色+黄色不能等于灰色？

蓝色+黄色= (青色+洋红色) + 黄色 => 灰色。为什么不行？

看这个。

因此，您可以使用RGB（CMY）混合颜色。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接