Convert RGBA color to RGB

Question

How to convert a RGBA color tuple, example (96, 96, 96, 202), to corresponding RGB color tuple?

Edit:

What I want is to get a RGB value which is most similar to the RGBA tuple visually on white background.

Kelley

Wouldn't that just be (96,96,96)? – Anthropoid

That depends on the background pixel's colour. – Avivah

Do you just want to remove the alpha channel? Or are do you want the RGB result of superimposing the RGBA over a (e.g.) white background? – Reformed

You might want to read the famous paper "Compositing digital images" (by Porter and Duff) for full details on alpha-composition: keithp.com/~keithp/porterduff – Prior

The answer of Andras Zoltan and hkurabko are also useful to calculate the oposite, I mean if you have various alpha blended colors and have its original backgrounds (mattes) then you could calculate the original RGBA color which is what I've been looking for a while ;) – Cheadle

Answer 1

I've upvoted Johannes' answer because he's right about that.

* A few comments have been raised that my original answer was not correct. It worked if alpha values were inverted from the normal. By definition, however, this won't work in most cases. I've therefore updated the formula below to be correct for the normal case. This ends up being equal to @hkurabko's answer below *

A more specific answer, however, incorporates the alpha value into the actual colour result based on an opaque background colour (or 'matte' as it's referred to).

There is an algorithm for this (from this wikipedia link):

• Normalise the RGBA values so that they're all between 0 and 1 - just divide each value by 255 to do this. We'll call the result Source.
• Normalise also the matte colour (black, white whatever). We'll call the result BGColor Note - if the background colour is also transparent, then you'll have to recurse the process for that first (again, choosing a matte) to get the source RGB for this operation.

• Now, the conversion is defined as (in complete psuedo code here!):

  Source => Target = (BGColor + Source) =
  Target.R = ((1 - Source.A) * BGColor.R) + (Source.A * Source.R)
  Target.G = ((1 - Source.A) * BGColor.G) + (Source.A * Source.G)
  Target.B = ((1 - Source.A) * BGColor.B) + (Source.A * Source.B)
  

To get the final 0-255 values for Target you simply multiply all the normalised values back up by 255, making sure you cap at 255 if any of the combined values exceed 1.0 (this is over-exposure and there are more complex algorithms dealing with this that involve whole-image processing etc.).

EDIT: In your question you said you want a white background - in that case just fix BGColor to 255,255,255.

Hobson

In the light of the question edit this is a very accurate and good answer. I deleted mine and hope you bubble up, since you explained the matters way better :) – Christie

I think this answer assumes that the background color is rgb, not rgba. – Fleurdelis

This is unusual considering that RGBA(0,0,0,1) is fully opaque black. But with the given algorithm, it would be fully transparent black. I think rearranging the algorithm to reflect this would make it a more helpful resource and better answer to the question. – Immunoreaction

Yes, I concede that the alpha channel is often expressed the opposite way around - with 0 being transparent and 1 being opaque. @hkurabko's answer does it the other way around, so rather than change my answer that, I think, is why that answer is gaining upvotes in addition to mine. – Hobson

that said - looking more closely to that answer, it appears to be identical to mine. – Hobson

@BryanRayner have added some edits to my answer. I'm gaining upvotes for this answer regularly, and it's possible that some people are finding it, having to invert the algorithm themselves. It'd be better if it was more complete. Thanks. – Hobson

@Andras Zoltan, there's a difference in your sample code from hkurabko's. It's definitely not quite right when using it just on paper. Unless that's intentional, I think you have an error. – Immunoreaction

I have now changed my solution to use alpha the right way around; I needed to use this just now; and having it the wrong way round just doesn't make any sense in the general case! – Hobson

If anyone is still interested, this JSBin allows to watch the color being transformed. Also it is ready to be used as a javacript function. I used BGColor as white, because I just do not understand the matte concept (sorry!). The link is as follows: jsbin.com/qocixeh/edit?html,js,console,output and as well a gist: gist.github.com/vladimirbrasil/bd139851ff757a1c8cb46fac93e733eb Hope it helps too. A zillion thanks for the answer! – Sunset

I have just asked a simular question here #58574584 - I want to convert a hex string Argb to Rgb. Your calculation is great but I don't know how to convert from/to hex. – Maggiore

Awesome Post! Quick question- How do we have BGColor.R, BGColor.B, BGColor.G if there is only 1 value of opaqueness per pixel? – Milkmaid

For anyone who wants to see the formula in a Google Sheet: docs.google.com/spreadsheets/d/…. – Tortoiseshell

Answer 2

hm... regarding to

http://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending

solution provided by Andras Zoltan should be slightly changed to:

Source => Target = (BGColor + Source) =
Target.R = ((1 - Source.A) * BGColor.R) + (Source.A * Source.R)
Target.G = ((1 - Source.A) * BGColor.G) + (Source.A * Source.G)
Target.B = ((1 - Source.A) * BGColor.B) + (Source.A * Source.B)

This changed version works fine for me, because in prev. version rgba(0,0,0,0) with matte rgb(ff,ff,ff) will be changed to rgb(0,0,0).

Selfoperating

I believe your are right. Wikipedia and Andras Zoltan's answer is a little bit different. – Cheadle

I agree, use this version, not @Andras Zoltan's. For a test scenario, convert rgba(0,0,0,.7) on background rgb(255,255,255) using both formulas; hkurabko's forumala clearly produces the correct answer. – Emancipate

Andras defines 0 alpha as opaque and 255 as transparent, while CSS defines it the opposite way. This answer works with the CSS's definition of alpha. – Jdavie

+1 This works with the most common definition of alpha (0 = transparent) like OpenGL, SDL, graphics editors. – Allophane

+1 - and I have updated my answer to work with alpha being the 'right way round', as per this as well. Ironically, having just tried to use my solution to do this, I agree that my original answer, although it made its own kind of sense, didn't really work for most applications. – Hobson

Answer 3

In my case, I wanted to convert an RGBA image to RGB and the following worked just as expected:

rgbImage = cv2.cvtColor(npimage, cv2.COLOR_RGBA2RGB)

Sholom

cv2.cvtColor(x, cv2.COLOR_RGBA2RGB) simply discards the alpha channel without applying it to the pixels, and it's the recommended method for anyone who wants to DELETE the alpha channel without applying its strength to the RGB channels. It's extremely fast, since it's OpenCL-accelerated and performs a perfect copy into contiguous memory. It's about 400x faster than "Numpy tricks" such as x[:, :, :3].copy() (the .copy being completely necessary to ensure the result is contiguous memory, to avoid 10-40 milliseconds of overhead of ALL subsequent OpenCV calls). – Marabout

Answer 4

This depends on the color space you use. If the RGBA is in pre-multiplied color-space and is semi-transparent, you need to divide out alpha to get the correct RGB color. If the color is in non pre-multiplied color-space, then you can just discard the alpha channel.

Prior

Answer 5

Here is some java code (works on Android API 24):

        //int rgb_background = Color.parseColor("#ffffff"); //white background
        //int rgba_color = Color.parseColor("#8a000000"); //textViewColor 

        int defaultTextViewColor = textView.getTextColors().getDefaultColor();

        int argb = defaultTextViewColor;
        int alpha = 0xFF & (argb >> 24);
        int red = 0xFF & (argb >> 16);
        int green = 0xFF & (argb >> 8);
        int blue = 0xFF & (argb >> 0);
        float alphaFloat = (float)alpha / 255;

        String colorStr = rgbaToRGB(255, 255, 255, red, green, blue, alphaFloat);

function:

protected String rgbaToRGB(int rgb_background_red, int rgb_background_green, int rgb_background_blue,
                        int rgba_color_red, int rgba_color_green, int rgba_color_blue, float alpha) {

    float red = (1 - alpha) * rgb_background_red + alpha * rgba_color_red;
    float green = (1 - alpha) * rgb_background_green + alpha * rgba_color_green;
    float blue = (1 - alpha) * rgb_background_blue + alpha * rgba_color_blue;

    String redStr = Integer.toHexString((int) red);
    String greenStr = Integer.toHexString((int) green);
    String blueStr = Integer.toHexString((int) blue);

    String colorHex = "#" + redStr + greenStr + blueStr;

    //return Color.parseColor(colorHex);
    return colorHex;
}

Joyance

Answer 6

Python function in accordance with hkurabko's answer.

def rgba2rgb(rgba: tuple[int, int, int, float], background: tuple[int, int, int] = (255, 255, 255)):
    return (
        round(((1 - rgba[3]) * background[0]) + (rgba[3] * rgba[0])),
        round(((1 - rgba[3]) * background[1]) + (rgba[3] * rgba[1])),
        round(((1 - rgba[3]) * background[2]) + (rgba[3] * rgba[2])),
    )

Spevek

Answer 7

Here is a convenient SASS function in accordance with Andras' and hkurabko's answers.

@function rgba_blend($fore, $back) {
  $ored: ((1 - alpha($fore)) * red($back) ) + (alpha($fore) * red($fore));
  $ogreen: ((1 - alpha($fore)) * green($back) ) + (alpha($fore) * green($fore));
  $oblue: ((1 - alpha($fore)) * blue($back) ) + (alpha($fore) * blue($fore));
  @return rgb($ored, $ogreen, $oblue);
}

Usage:

$my_color: rgba(red, 0.5); // build a color with alpha for below

#a_div {
  background-color: rgba_blend($my_color, white);
}

Sardonyx

in sass, we may use: mix($color, white, $alpha*100) – Yi

Answer 8

Typescript function in accordance with hkurabko's answer.

type RgbType = { red: number; green: number; blue: number; };
type RgbaType = { alpha: number; } & RgbType;

export const blendAlphaToBackground = (
  rgba: RgbaType,
  background: RgbaType = {red: 255, green: 255, blue: 255, alpha: 1},
): RgbaType => {
  const red = Math.round((1 - rgba.alpha) * background.red + rgba.alpha * rgba.red);
  const green = Math.round((1 - rgba.alpha) * background.green + rgba.alpha * rgba.green);
  const blue = Math.round((1 - rgba.alpha) * background.blue + rgba.alpha * rgba.blue);

  return {red, green, blue, alpha: 1};
};

Betteanne

Answer 9

In my case I wanted to make the RGB image look as if it was an RGBA image on a white background. As typical converting methods just remove the A channel, this can result in pixels in the RGB channels to become visible that were previously made transparent by the alpha channel.

The following worked for me:

import numpy as np

def convert_RGBA_to_RGB(input_image): 
    # Takes an RGBA image as input
    
    # Based on the following chat with user Andras Deak
    ## https://chat.stackoverflow.com/transcript/message/55060299#55060299
   
    input_image_normed = input_image / 255  # shape (nx, ny, 4), dtype float
    alpha = input_image_normed[..., -1:]  # shape (nx, ny, 1) for broadcasting
    input_image_normed_rgb = input_image_normed[..., :-1]  # shape (nx, ny, 3)
    #bg_normed = np.zeros_like(red_normed_rgb)  # shape (nx, ny, 3) <-- black background
    bg_normed = np.ones_like(input_image_normed_rgb)  # shape (nx, ny, 3) <-- white background
    composite_normed = (1 - alpha) * bg_normed + alpha * input_image_normed_rgb
    composite = (composite_normed * 255).round().astype(np.uint8)
    return composite

Hype