我花了 3-4 天的时间来回答这个问题。这是一个非常复杂的问题。

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

1. CMYK 混合：这不是完美的解决方案，但如果您现在需要一个解决方案，并且您不想花费数月时间学习该主题、实验和编码，您可以查看：https : //github.com/ AndreasSoiron/Color_mixer

2. 实施 Kubelka-Munk 理论。我花了很多时间阅读它，并试图理解它。如果您想要专业的解决方案，这应该是可行的方法，但对于您想要混合的每种颜色，它需要 6 个参数（如反射率、吸收率等）。有 R、G、B 是不够的。实施该理论并不难，但获取有关每种颜色所需的参数似乎是缺失的部分。如果你知道怎么做，请告诉我:)

3. 实验性：你可以做一些 ipad 应用程序的开发者所做的事情：Paper所做的。他们手动选择了 100 对流行的颜色，并用眼球测试了它们应该如何混合。在此处了解更多信息。

我个人将暂时实施 CMYK 混合，也许以后，如果我有时间，我会尝试制作像 Fiftythree 那样的东西。等着瞧 ：）

该RYB颜色模型可能是混色计算一个合适的选择。根据维基百科，它主要用于艺术和设计教育，尤其是绘画。

要混合 2 种颜色，将两种颜色从 RGB 转换为 RYB，通过添加每个颜色分量来混合颜色，然后将生成的颜色从 RYB 转换回 RGB。

我已经使用Online Color Mixing Tool尝试过这个，结果是

• 0000FF（蓝色）与#FFFF00（黄色）混合得到#008000（深绿色），

• FF0000（红色）与#FFFF00（黄色）混合得到#FFA000（橙色）。

所以这个方法产生的结果正是你所期望的。

不幸的是，我无法找到带有“即用型”公式的参考，以将 RGB 转换为 RYB，然后再转换回 RGB。

论文 Paint Inspired Color Mixing and Compositing for Visualization - Gossett and Chen 在“2 ACHIEVING INTUITIVE COLOR MIXING”一节中描述了 RYB 颜色模型的一般思想。

根据那篇论文，从 RYB 到 RGB 的转换是通过三线性插值完成的 。

难点是RGB到RYB的转换，因为它需要三线性插值的反演。有关 更多信息，请参阅RGB 和 RYB 颜色空间之间的转换。

即使这个答案没有提供完整的计算公式，我希望它给出一些如何进行的想法。

在尝试将 2 种 RGB 颜色混合在一起时，我实际上遇到了同样的问题。这两个功能对我有用：

//colorChannelA and colorChannelB are ints ranging from 0 to 255
function colorChannelMixer(colorChannelA, colorChannelB, amountToMix){
    var channelA = colorChannelA*amountToMix;
    var channelB = colorChannelB*(1-amountToMix);
    return parseInt(channelA+channelB);
}
//rgbA and rgbB are arrays, amountToMix ranges from 0.0 to 1.0
//example (red): rgbA = [255,0,0]
function colorMixer(rgbA, rgbB, amountToMix){
    var r = colorChannelMixer(rgbA[0],rgbB[0],amountToMix);
    var g = colorChannelMixer(rgbA[1],rgbB[1],amountToMix);
    var b = colorChannelMixer(rgbA[2],rgbB[2],amountToMix);
    return "rgb("+r+","+g+","+b+")";
}

要将红色 ( [255,0,0] ) 与蓝色 ( [0,0,255] ) 均匀混合，您可以调用

colorMixer([255,0,0], [0,0,255], 0.5);//returns "rgb(127,0,127)" (purple)

这可能会有所帮助，但您必须先将每个颜色值转换为数组。如果您使用 Fabric.js 来处理画布元素，这将变得非常简单。打电话就行

var rgbA = new fabric.Color(yourColor);
var rgbB = new fabric.Color(yourSecondColor);

然后打电话

colorMixer(rgbA.getSource(),rgbB.getSource(),0.5);

希望这些功能有所帮助。

使用 CIELAB 颜色，您在 LAB 颜色空间中的两种颜色中的每一种都有三个坐标。（顺便说一句，在这方面做得很好）。对您来说效果最好且最容易实现的方法是找到连接 LAB 空间中两点的假想线段的三维中点。您可以通过对两种颜色的每个分量求平均值来轻松完成此操作：平均值L、平均值a和平均值b。然后通过反转转换将此颜色转换回 RGB 空间（确保您的照明空间在两种方式下都保持相同）。

您的新颜色可能在 RGB 颜色空间之外。在这种情况下，您可以决定剪裁到最近的可见颜色。（蓝调特别容易受到这种影响）。

现在您拥有 LAB（或 L*a*b*）格式的两种颜色，您可以将它们平均在一起。

L(result) = L(first color) + L(second color) / 2
A(result) = A(first color) + A(second color) / 2
B(result) = B(first color) + B(second color) / 2

你已经知道了，对吧？因为这是您使用原始 RGB 颜色对它们进行平均的操作。