“自然地"混合两种颜色在 JavaScript 中 [英] Mixing two colors "naturally" in javascript
问题描述
问题:我想在javascript中混合两种颜色，并得到结果颜色.SO上有很多类似的问题，但是我没有发现任何实际工作正常的问题.我知道混合两种不同颜色的颜料(颜料)和灯光会产生非常不同的结果(http://en.wikipedia.org/wiki/Color_mixing).
The problem: I want to mix two colors in javascript, and get the result color. There are a lot of similar question on SO, however I doesn't find anything that actually works correctly. I know that mixing two different colored paints(pigments) and lights will give very different results (http://en.wikipedia.org/wiki/Color_mixing).
以下是我已经看到并尝试实施的问题和建议的解决方案:
Here are the questions and suggested solutions I've already seen, and tried to implement:
1: 混合两个 RGB 颜色向量以获得结果
所以，在RGB中混合颜色.我实现了它，在某些情况下它起作用，在某些情况下它不起作用.
1: Mixing two RGB color vectors to get resultant
So, mixing colors in RGB. I implemented it, and in some cases it works in some cases it doesn't.
工作示例: 混合 red 和 yellow -> orange.太棒了！
http://jsbin.com/afoim/1/edit
Working example: Mixing red with yellow -> orange. Great!
http://jsbin.com/afomim/1/edit
不工作的例子: 混合 blue 和 yellow -> gray.不太好！:)http://jsbin.com/afoim/5/edit
我知道在 RGB 混合 blue 和 yellow 永远不会使 green，我明白为什么.
Not working example: Mixing blue with yellow -> gray. Not so great! :)
http://jsbin.com/afomim/5/edit
I know that in RGB mixing blue with yellow will never make green, and I understand why.
我们不会在这里找到答案，让我们继续前进.
We will not find the answer here, let's go forward.
2: 像油漆一样添加颜色(颜色)(蓝色 + 黄色 = 绿色等)
让我们尝试使用本讨论中建议的 CMYK 值.将 cyan 与 yellow 混合会得到 green:
http://jsbin.com/igaveg/1/edit
但混合 blue 和 yellow 导致 black.
http://jsbin.com/igaveg/2/edit -> 不工作！
Let's try to work with CMYK values as suggested in this discussion. Mixing cyan with yellow gives green:
http://jsbin.com/igaveg/1/edit
but mixing blue with yellow results in black.
http://jsbin.com/igaveg/2/edit -> Not working!
3: 如何自然地"混合颜色用 C#?
一个非常相似的问题.最受好评的答案建议将颜色转换为 LAB，这个解决方案似乎很有希望.
所以我将我的颜色转换为 LAB.转换算法是正确的，我测试过了！
3: How to mix colors "naturally" with C#?
A very similar question. The most upvoted answer suggests to convert colors to LAB, and this solution seems promising.
So I converted my colors to LAB. The conversion algo is correct, I tested it!
http://jsbin.com/oxefox/1/edit
现在我在 LAB 中有两种颜色，但如何混合它们?
Now I have the two colors in LAB, but how to mix them?
注意我知道我可能找不到将 blue 与 yellow 混合在一起并给出完美的 green，但我希望我能生成类似于绿色的东西:)
NOTE I know that probably I will not find an algo that mixes blue with yellow and will give the perfect green, but I hope I can generate something similar to green :)
推荐答案
我用了 3-4 天的时间来解决这个问题.这是一个非常复杂的问题.
I dedicated 3-4 days to this question. It's a really complex problem.
如果您想自然地"混合两种颜色，您可以这样做:
Here is what you can do if you want to mix two colors "naturally":
CMYK 混合:这不是完美的解决方案，但如果您现在需要一个解决方案，并且您不想花费数月时间学习该主题、试验和编码，您可以查看以下内容:
实施 Kubelka-Munk 理论.我花了很多时间阅读它，并试图理解它.如果您想要专业的解决方案，这应该是可行的方法，但对于您想要混合的每种颜色，它需要 6 个参数(如反射率、吸收率等).有 R、G、B 是不够的.实施该理论并不难，但获取有关每种颜色所需的参数似乎是缺失的部分.如果你知道怎么做，请告诉我:)
Implementing the Kubelka-Munk theory. I spent a lot of time reading about it, and trying to understand it. This should be the way to go if you want a professional solution, but it needs 6 parameters (like reflectance, absorption, etc.) for each colors you want to mix. Having R, G, B isn't enough. Implementing the theory isn't hard, but getting those parameters you need about each color seems to be the missing part. If you figure it out how to do it, let me know :)
实验性:您可以做一些 ipad 应用程序的开发者:Paper 所做的事情.他们手动选择了 100 对流行的颜色，并用眼球测试了它们应该如何混合.在此处了解更多信息.p>
Experimental: you can do something what the developers of the ipad app: Paper have done. They manually selected 100 pairs of popular colors and eyeball-tested how they should blend. Learn more about it here.
我个人将暂时实施 CMYK 混合，也许以后，如果我有时间，我会尝试制作像 Fiftythree 那样的东西.会看到:)
I personally will implement the CMYK mixing for the moment, and maybe later, if I have time I'll try to make something like the guys at Fiftythree. Will see :)
这篇关于“自然地"混合两种颜色在 JavaScript 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
