RGB值的加色混合算法

时间：2009-04-07 16:25:28

标签： algorithm colors

我正在寻找一种算法来为RGB值进行加色混合。

是否将RGB值一起添加到最大值为256？

(r1, g1, b1) + (r2, g2, b2) =
    (min(r1+r2, 256), min(g1+g2, 256), min(b1+b2, 256))

13 个答案:

答案 0 :(得分：77)

要使用Alpha通道进行混合，您可以使用以下公式：

r = new Color();
r.A = 1 - (1 - fg.A) * (1 - bg.A);
if (r.A < 1.0e-6) return r; // Fully transparent -- R,G,B not important
r.R = fg.R * fg.A / r.A + bg.R * bg.A * (1 - fg.A) / r.A;
r.G = fg.G * fg.A / r.A + bg.G * bg.A * (1 - fg.A) / r.A;
r.B = fg.B * fg.A / r.A + bg.B * bg.A * (1 - fg.A) / r.A;

fg是油漆颜色。 bg是背景。 r是生成的颜色。 1.0e-6只是一个非常小的数字，以弥补舍入错误。

注意：此处使用的所有变量都在[0.0,1.0]范围内。如果要使用[0,255]范围内的值，则必须除以255。

例如，50％绿色之上的50％红色：

// background, 50% green
var bg = new Color { R = 0.00, G = 1.00, B = 0.00, A = 0.50 };
// paint, 50% red
var fg = new Color { R = 1.00, G = 0.00, B = 0.00, A = 0.50 };
// The result
var r = new Color();
r.A = 1 - (1 - fg.A) * (1 - bg.A); // 0.75
r.R = fg.R * fg.A / r.A + bg.R * bg.A * (1 - fg.A) / r.A; // 0.67
r.G = fg.G * fg.A / r.A + bg.G * bg.A * (1 - fg.A) / r.A; // 0.33
r.B = fg.B * fg.A / r.A + bg.B * bg.A * (1 - fg.A) / r.A; // 0.00

产生的颜色为：(0.67, 0.33, 0.00, 0.75)或75％棕色（或深橙色）。

您也可以撤消这些公式：

var bg = new Color();
if (1 - fg.A <= 1.0e-6) return null; // No result -- 'fg' is fully opaque
if (r.A - fg.A < -1.0e-6) return null; // No result -- 'fg' can't make the result more transparent
if (r.A - fg.A < 1.0e-6) return bg; // Fully transparent -- R,G,B not important
bg.A = 1 - (1 - r.A) / (1 - fg.A);
bg.R = (r.R * r.A - fg.R * fg.A) / (bg.A * (1 - fg.A));
bg.G = (r.G * r.A - fg.G * fg.A) / (bg.A * (1 - fg.A));
bg.B = (r.B * r.A - fg.B * fg.A) / (bg.A * (1 - fg.A));

或

var fg = new Color();
if (1 - bg.A <= 1.0e-6) return null; // No result -- 'bg' is fully opaque
if (r.A - bg.A < -1.0e-6) return null; // No result -- 'bg' can't make the result more transparent
if (r.A - bg.A < 1.0e-6) return bg; // Fully transparent -- R,G,B not important
fg.A = 1 - (1 - r.A) / (1 - bg.A);
fg.R = (r.R * r.A - bg.R * bg.A * (1 - fg.A)) / fg.A;
fg.G = (r.G * r.A - bg.G * bg.A * (1 - fg.A)) / fg.A;
fg.B = (r.B * r.A - bg.B * bg.A * (1 - fg.A)) / fg.A;

公式将计算背景或油漆颜色必须产生给定的最终颜色。

如果您的背景不透明，结果也会不透明。然后，前景色可以采用具有不同α值的一系列值。对于每个通道（红色，绿色和蓝色），您必须检查哪个alpha范围会产生有效值（0 - 1）。

答案 1 :(得分：55)

这取决于你想要什么，它可以帮助看看不同方法的结果。

如果你想要

Red + Black        = Red
Red + Green        = Yellow
Red + Green + Blue = White
Red + White        = White 
Black + White      = White

然后添加一个钳位工作（例如min(r1 + r2, 255)）这更像你提到的灯光模型。

如果你想要

Red + Black        = Dark Red
Red + Green        = Dark Yellow
Red + Green + Blue = Dark Gray
Red + White        = Pink
Black + White      = Gray

然后你需要对这些值进行平均（例如(r1 + r2) / 2）这样可以更好地用于增亮/变暗颜色和创建渐变。

答案 2 :(得分：46)

有趣的事实：计算机RGB值来自光子通量的平方根。因此，作为一般功能，您的数学应考虑到这一点。给定通道的一般功能是：

blendColorValue(a, b, t)
    return sqrt((1 - t) * a^2 + t * b^2)

其中a和b是要混合的颜色，t是0-1之间的数字，表示a和b之间所需混合中的点。

alpha通道不同;它并不代表光子强度，只是应该显示的背景百分比;所以当混合alpha值时，线性平均值就足够了：

blendAlphaValue(a, b, t)
    return (1-t)*a + t*b;

所以，为了处理混合两种颜色，使用这两个函数，下面的伪代码对你有好处：

blendColors(c1, c2, t)
    ret
    [r, g, b].each n ->
        ret[n] = blendColorValue(c1[n], c2[n], t)
    ret.alpha = blendAlphaValue(c1.alpha, c2.alpha, t)
    return ret

顺便说一句，我渴望一种编程语言和键盘，它们都允许干净地表示数学（或更多）（组合上线unicode字符不适用于上标，符号和大量其他字符）和正确地解释它。 sqrt（（1-t）* pow（a，2）+ t * pow（b，2））只是看起来不干净。

答案 3 :(得分：8)

几点：

  • 我想你想用min而不是max
  • 我想你想用255而不是256

这将给出：

（r1，g1，b1）+（r2，g2，b2）=（min（r1 + r2,255），min（g1 + g2,255），min（b1 + b2,255））

然而，混合颜色的“自然”方式是使用平均值，然后你不需要min：

（r1，g1，b1）+（r2，g2，b2）=（（r1 + r2）/ 2，（g1 + g2）/ 2，（b1 + b2）/ 2）

答案 4 :(得分：6)

Javascript函数混合rgba颜色

c1，c2和结果 - JSON就像 c1 = {r：0.5，g：1，b：0，a：0.33} 

    var rgbaSum = function(c1, c2){
       var a = c1.a + c2.a*(1-c1.a);
       return {
         r: (c1.r * c1.a  + c2.r * c2.a * (1 - c1.a)) / a,
         g: (c1.g * c1.a  + c2.g * c2.a * (1 - c1.a)) / a,
         b: (c1.b * c1.a  + c2.b * c2.a * (1 - c1.a)) / a,
         a: a
       }
     }

答案 5 :(得分：4)

PYTHON 颜色 混合 通过 添加 IN CMYK 空格

一种可行的方法是首先将颜色转换为CMYK格式，然后将其添加到那里，然后重新转换为RGB。

以下是Python中的示例代码：

rgb_scale = 255
cmyk_scale = 100


def rgb_to_cmyk(self,r,g,b):
    if (r == 0) and (g == 0) and (b == 0):
        # black
        return 0, 0, 0, cmyk_scale

    # rgb [0,255] -> cmy [0,1]
    c = 1 - r / float(rgb_scale)
    m = 1 - g / float(rgb_scale)
    y = 1 - b / float(rgb_scale)

    # extract out k [0,1]
    min_cmy = min(c, m, y)
    c = (c - min_cmy) 
    m = (m - min_cmy) 
    y = (y - min_cmy) 
    k = min_cmy

    # rescale to the range [0,cmyk_scale]
    return c*cmyk_scale, m*cmyk_scale, y*cmyk_scale, k*cmyk_scale

def cmyk_to_rgb(self,c,m,y,k):
    """
    """
    r = rgb_scale*(1.0-(c+k)/float(cmyk_scale))
    g = rgb_scale*(1.0-(m+k)/float(cmyk_scale))
    b = rgb_scale*(1.0-(y+k)/float(cmyk_scale))
    return r,g,b

def ink_add_for_rgb(self,list_of_colours):
    """input: list of rgb, opacity (r,g,b,o) colours to be added, o acts as weights.
    output (r,g,b)
    """
    C = 0
    M = 0
    Y = 0
    K = 0

    for (r,g,b,o) in list_of_colours:
        c,m,y,k = rgb_to_cmyk(r, g, b)
        C+= o*c
        M+=o*m
        Y+=o*y 
        K+=o*k 

    return cmyk_to_rgb(C, M, Y, K)

然后你问题的结果是（假设你的两种颜色混合了一半：

r_mix, g_mix, b_mix = ink_add_for_rgb([(r1,g1,b1,0.5),(r2,g2,b2,0.5)])

其中0.5表示我们将50％的第一种颜色与50％的第二种颜色混合。

答案 6 :(得分：3)

是的，就这么简单。另一个选择是找到平均值（用于创建渐变）。

这实际上取决于你想要达到的效果。

然而，当添加Alpha时，它变得复杂。使用alpha进行混合有许多不同的方法。

简单alpha混合的一个例子： http://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending

答案 7 :(得分：3)

在这里找到Fordi和Markus Jarderot在一个python函数中建议的混合方法，该函数逐渐在两种颜色A和B之间进行混合或混合。

“混合”模式可用于在两种颜色之间进行插值。如果将一种半透明颜色绘制在另一种（可能是半透明的）颜色之上，则“混合”模式（带有t=0）可用于计算结果颜色。 gamma校正会产生更好的结果，因为它考虑到了物理光强度和（人类）感知到的亮度是非线性相关的事实。

import numpy as np

def mix_colors_rgba(color_a, color_b, mode="mix", t=None, gamma=2.2):
    """
    Mix two colors color_a and color_b.

    Arguments:
        color_a:    Real-valued 4-tuple. Foreground color in "blend" mode.
        color_b:    Real-valued 4-tuple. Background color in "blend" mode.
        mode:       "mix":   Interpolate between two colors.
                    "blend": Blend two translucent colors.
        t:          Mixing threshold.
        gamma:      Parameter to control the gamma correction.

    Returns: 
        rgba:       A 4-tuple with the result color.

    To reproduce Markus Jarderot's solution:
            mix_colors_rgba(a, b, mode="blend", t=0, gamma=1.)
    To reproduce Fordi's solution:
            mix_colors_rgba(a, b, mode="mix", t=t, gamma=2.)
    To compute the RGB color of a translucent color on white background:
            mix_colors_rgba(a, [1,1,1,1], mode="blend", t=0, gamma=None)
    """
    assert(mode in ("mix", "blend"))
    assert(gamma is None or gamma>0)
    t = t if t is not None else (0.5 if mode=="mix" else 0.)
    t = max(0,min(t,1))
    color_a = np.asarray(color_a)
    color_b = np.asarray(color_b)
    if mode=="mix" and gamma in (1., None):
        r, g, b, a = (1-t)*color_a + t*color_b
    elif mode=="mix" and gamma > 0:
        r,g,b,_ = np.power((1-t)*color_a**gamma + t*color_b**gamma, 1/gamma)
        a = (1-t)*color_a[-1] + t*color_b[-1]
    elif mode=="blend":
        alpha_a = color_a[-1]*(1-t)
        a = 1 - (1-alpha_a) * (1-color_b[-1])
        s = color_b[-1]*(1-alpha_a)/a
        if gamma in (1., None):
            r, g, b, _ = (1-s)*color_a + s*color_b
        elif gamma > 0:
            r, g, b, _ = np.power((1-s)*color_a**gamma + s*color_b**gamma,
                                  1/gamma)

    return tuple(np.clip([r,g,b,a], 0, 1))

请参见下文如何使用它。在“混合”模式下，左右颜色完全匹配color_a和color_b。在“混合”模式下，t=0处的左侧颜色是将color_a混合到color_b（和白色背景）上时产生的颜色。在此示例中，color_a变得越来越半透明，直到到达color_b为止。

请注意，如果alpha值为1.0，则混合和混合是等效的。

Results

为完整起见，请使用此处的代码重现以上图表。

import matplotlib.pyplot as plt
import matplotlib as mpl

def plot(pal, ax, title):
    n = len(pal)
    ax.imshow(np.tile(np.arange(n), [int(n*0.20),1]),
              cmap=mpl.colors.ListedColormap(list(pal)),
              interpolation="nearest", aspect="auto")
    ax.set_xticks([])
    ax.set_yticks([])
    ax.set_xticklabels([])
    ax.set_yticklabels([])
    ax.set_title(title)

_, (ax1, ax2, ax3, ax4) = plt.subplots(nrows=4,ncols=1)

n = 101
ts = np.linspace(0,1,n)
color_a = [1.0,0.0,0.0,0.7] # transparent red
color_b = [0.0,0.0,1.0,0.8] # transparent blue

plot([mix_colors_rgba(color_a, color_b, t=t, mode="mix", gamma=None)
      for t in ts], ax=ax1, title="Linear mixing")
plot([mix_colors_rgba(color_a, color_b, t=t, mode="mix", gamma=2.2)
      for t in ts], ax=ax2, title="Non-linear mixing (gamma=2.2)")
plot([mix_colors_rgba(color_a, color_b, t=t, mode="blend", gamma=None)
      for t in ts], ax=ax3, title="Linear blending")
plot([mix_colors_rgba(color_a, color_b, t=t, mode="blend", gamma=2.2)
      for t in ts], ax=ax4, title="Non-linear blending (gamma=2.2)")
plt.tight_layout()
plt.show()

Formulas:
    Linear mixing (gamma=1):
                r,g,b,a:    (1-t)*x + t*y
    Non-linear mixing (gama≠1):
                r,g,b:      pow((1-t)*x**gamma + t*y**gamma, 1/gamma)
                a:          (1-t)*x + t*y
    Blending (gamma=1):
                a:          1-(1-(1-t)*x)*(1-y)
                s:          alpha_b*(1-alpha_a)*a
                r,g,b:      (1-s)*x + s*y
    Blending (gamma≠1):
                a:          1-(1-(1-t)*x)*(1-y)
                s:          alpha_b*(1-alpha_a)/a
                r,g,b:      pow((1-s)*x**gamma + s*y**gamma, 1/gamma)

最后，here是有关伽玛校正的有用读物。

答案 8 :(得分：1)

使用C ++编写/使用过@Markus Jarderot的sRGB混合答案（由于这是默认的传统，因此未进行伽玛校正）

//same as Markus Jarderot's answer
float red, green, blue;
alpha = (1.0 - (1.0 - back.alpha)*(1.0 - front.alpha));
red   = (front.red   * front.alpha / alpha + back.red   * back.alpha * (1.0 - front.alpha));
green = (front.green * front.alpha / alpha + back.green * back.alpha * (1.0 - front.alpha));
blue  = (front.blue  * front.alpha / alpha + back.blue  * back.alpha * (1.0 - front.alpha));

//faster but equal output
alpha = (1.0 - (1.0 - back.alpha)*(1.0 - front.alpha));
red   = (back.red   * (1.0 - front.alpha) + front.red   * front.alpha);
green = (back.green * (1.0 - front.alpha) + front.green * front.alpha);
blue  = (back.blue  * (1.0 - front.alpha) + front.blue  * front.alpha);

//even faster but only works when all values are in range 0 to 255
int red, green, blue;
alpha = (255 - (255 - back.alpha)*(255 - front.alpha));
red   = (back.red   * (255 - front.alpha) + front.red   * front.alpha) / 255;
green = (back.green * (255 - front.alpha) + front.green * front.alpha) / 255;
blue  = (back.blue  * (255 - front.alpha) + front.blue  * front.alpha) / 255;

更多信息：what-every-coder-should-know-about-gamma

答案 9 :(得分：1)

当我来到这里时，没有找到我真正想要的“加色混合”算法，该算法也可以在Photoshop中使用，并且在{{3}上被描述为“屏幕” }。 （又称“变亮”或“求逆”。）产生的结果类似于两个光源的组合。

  

在“屏幕混合”模式下，两层像素的值被反转，相乘然后再次反转。这产生相反的乘积效果。结果是更明亮的画面。

这里是：

// (rgb values are 0-255)
function screen(color1, color2) {
    var r = Math.round((1 - (1 - color1.R / 255) * (1 - color2.R / 255)) * 255);
    var g = Math.round((1 - (1 - color1.G / 255) * (1 - color2.G / 255)) * 255);
    var b = Math.round((1 - (1 - color1.B / 255) * (1 - color2.B / 255)) * 255);
    return new Color(r, g, b);
}

答案 10 :(得分：1)

我正在研究类似的问题，并在这里结束，但最后不得不编写自己的实现。我想基本上将新的前景色“覆盖”在现有的背景色上。 （并且没有使用诸如t这样的任意中点。我相信我的实现仍然是“可加的”。）这似乎在我的所有测试用例中都非常清晰地融合在一起。

在这里，new_argb只是将int转换为具有4个unsigned char的结构，所以我可以减少移位量。

int blend_argb(int foreground, int background)
{
    t_argb fg;
    t_argb bg;
    t_argb blend;
    double ratio;

    fg = new_argb(foreground);
    bg = new_argb(background);

    // If background is transparent,
    // use foreground color as-is and vice versa.
    if (bg.a == 255)
        return (foreground);
    if (fg.a == 255)
        return (background);

    // If the background is fully opaque,
    // ignore the foreground alpha. (Or the color will be darker.)
    // Otherwise alpha is additive.
    blend.a = ((bg.a == 0) ? 0 : (bg.a + fg.a));

    // When foreground alpha == 0, totally covers background color.
    ratio = fg.a / 255.0;
    blend.r = (fg.r * (1 - ratio)) + (bg.r * ratio);
    blend.g = (fg.g * (1 - ratio)) + (bg.g * ratio);
    blend.b = (fg.b * (1 - ratio)) + (bg.b * ratio);

    return (blend.a << 24 | blend.r << 16 | blend.g << 8 | blend.b);
}

对于上下文，在我的环境中，我正在将颜色int写入一维像素数组，该数组以0字节初始化，并增加alpha值会使像素趋向于黑色。 （{0 0 0 0将是不透明的黑色，255 255 255 255将是透明的白色，也就是黑色。）

答案 11 :(得分：0)

这是一个高度优化的独立c ++类公共域，具有浮点和两种不同优化的功能和宏格式8位混合机制，以及对手头问题和如何进行技术讨论，以及优化这个问题的重要性：

https://github.com/fyngyrz/colorblending

答案 12 :(得分：0)

谢谢Markus Jarderot，Andras Zoltan和hkurabko；这是用于混合RGB图像列表的Python代码。

使用Markus Jarderot的代码可以生成RGBA颜色，然后我使用Andras Zoltan and hkurabko's方法将RGBA转换为RGB。

谢谢！ 

import numpy as np
def Blend2Color(C1,C2):
    c1,c1a=C1
    c2,c2a=C2
    A = 1 - (1 - c1a) * (1 - c2a);
    if (A < 1.0e-6): 
        return (0,0,0) #Fully transparent -- R,G,B not important
    Result=(np.array(c1)*c1a+np.array(c2)*c2a*(1-c1a))/A
    return Result,A
def RGBA2RGB(RGBA,BackGround=(1,1,1)):# whilt background
    A=RGBA[-1]
    RGB=np.add(np.multiply(np.array(RGBA[:-1]),A),
               np.multiply(np.array(BackGround),1-A))
    return RGB

def BlendRGBList(Clist,AlphaList=None,NFloat=2,ReturnRGB=True,
                 RGB_BackGround=(1,1,1)):
    N=len(Clist)
    if AlphaList==None:
        ClistUse=Clist.copy()
    else:
        if len(AlphaList)==N:
            AlphaListUse=np.multiply(AlphaList,10**NFloat).astype(int)
            ClistUse=np.repeat(np.array(Clist), AlphaListUse, axis=0)
        else:
            raise('len of AlphaList must equal to len of Clist!')
    while N!=1:
        temp=ClistUse.copy()
        ClistUse=[]
        for C in temp[:-1]:
            c1,a1=C
            c2,a2=temp[-1]
            ClistUse.append(Blend2Color(C1=(c1,a1*(1-1/N)),C2=(c2,a2*1/N)))
        N=len(ClistUse)
    Result=np.append(ClistUse[0][0],ClistUse[0][1])
    if ReturnRGB:
        Result=RGBA2RGB(Result,BackGround=RGB_BackGround)

    return Result

测试

BlendRGBList([[(1,0,0),1],[(0,1,0),1]],ReturnRGB=True)
#array([0.75, 0.5 , 0.25])
BlendRGBList([[(1,0,0),1],[(0,1,0),1]],ReturnRGB=False)
#array([0.66666667, 0.33333333, 0.        , 0.75      ])
相关问题
最新问题