混合两种颜色“天然”在javascript中 [英] Mixing two colors "naturally" in javascript

问题描述

问题：我想在javascript中混合两种颜色，并得到结果颜色。
有很多类似的问题，SO，但我没有找到任何实际工作正常。我知道混合两种不同颜色的油漆（颜料）和灯会产生非常不同的结果（ http://en.wikipedia.org/wiki / Color_mixing ）。

这里是我已经看过的问题和建议的解决方案，并试图实现：

1：：混合使用两个RGB颜色向量以获得结果□
所以，混合RGB颜色。

红色与黄色 - > 橙色。太棒了！

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

无效示例：将蓝色与黄色 - > gray 。不太好！ :)
http://jsbin.com/afomim/5/edit

我知道在RGB混合蓝色和黄色永远不会使绿色，我明白为什么。

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

2： 像Paint（蓝色+黄色=绿色等）一起添加颜色（颜色）

让我们尝试使用CMYK值，如本讨论中所建议的。将青色与黄色混合以给予绿色：

http://jsbin.com/igaveg/1/edit
但混合 blue 与黄结果为 black 。

http://jsbin.com/igaveg/2/edit - >无法使用！

3： 如何混合颜色自然 with C＃？

一个非常类似的问题。最支持的答案建议将颜色转换为LAB，这个解决方案似乎很有前景。

所以我把颜色转换为LAB。转换算法是正确的，我测试了它！

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

现在我在LAB中有两种颜色，但是如何混合？

注意我知道我可能找不到一个混合 blue 和黄色并将给出完美的绿色，但我希望我可以生成类似于绿色的东西：）

解决方案

我专用了3-4天的这个问题。这是一个非常复杂的问题。

如果你想自然地混合两种颜色，你可以这样做：

1. CMYK混音：这不是一个完美的解决方案，但如果你现在需要一个解决方案，你不想花几个月的时间学习主题，实验和编码，可以检查： https://github.com/AndreasSoiron/Color_mixer




2. 实施Kubelka-Munk理论。我花了很多时间阅读它，并试图理解它。如果你想要一个专业的解决方案，这应该是去的方式，但它需要6个参数（如反射率，吸收等），你想要混合的每种颜色。有R，G，B是不够的。实现理论并不困难，但是获得每个颜色所需的参数似乎是缺少的部分。如果你知道如何做，让我知道：）




3. 实验：你可以做一些什么ipad应用程序的开发人员：纸张。他们手动选择100对流行的颜色和眼球测试如何应该混合。请在此处了解详情。 p>

我个人将实施CMYK混合，或许以后，如果我有时间，像五十三的家伙。会看到：）

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: 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.

Working example: Mixing red with yellow -> orange. Great!
http://jsbin.com/afomim/1/edit

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: Adding Colours (Colors) Together like Paint (Blue + Yellow = Green, etc)

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: 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

Now I have the two colors in LAB, but how to mix them?

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 :)

解决方案

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":

1. CMYK mixing: it's not the perfect solution, but if you need a solution now, and you don't want to spend months with learning about the subject, experimenting and coding, you can check this out: https://github.com/AndreasSoiron/Color_mixer

2. 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 :)

3. 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.

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屋！