Convert Rgb to Rgba Over White

Convert RGB to RGBA over white

Take the lowest color component, and convert that to an alpha value. Then scale the color components by subtracting the lowest, and dividing by the alpha value.

Example:

152 converts to an alpha value of (255 - 152) / 255 ~ 0.404

152 scales using (152 - 152) / 0.404 = 0
177 scales using (177 - 152) / 0.404 ~ 62
202 scales using (202 - 152) / 0.404 ~ 123

So, rgb(152, 177, 202) displays as rgba(0, 62, 123, .404).

I have verified in Photoshop that the colors actually match perfectly.

Convert RGBA color to RGB

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.

How to convert rgba to a transparency-adjusted-hex?

It depends on the background to which your transparent color will be applied.
But if you know the color of the background (e.g. white), you can calculate the RGB color resulting of the RGBA color applied to the specific background.

It's just the weighted average between the color and the background, the weight being the alpha channel (from 0 to 1) :

Color = Color * alpha + Background * (1 - alpha);

For your transparent light blue rgba(0,129,255,.4) against white rgb(255,255,255) :

Red   =   0 * 0.4 + 255 * 0.6 = 153
Green = 129 * 0.4 + 255 * 0.6 = 204.6
Blue  = 255 * 0.4 + 255 * 0.6 = 255

Which gives rgb(153,205,255) or #99CDFF

create a white rgba / CSS3

The code you have is a white with low opacity.

If something white with a low opacity is above something black, you end up with a lighter shade of gray. Above red? Lighter red, etc. That is how opacity works.

Here is a simple demo.

If you want it to look 'more white', make it less opaque:

background:rgba(255,255,255, 0.9);

Demo

RGB/RGBA color values in Protractor

Protractor uses Jasmine as its testing framework by default and it provides a mechanism for adding custom expectations.

So, you could do something like this:

In your protractor config file:

var customMatchers = {
  toHaveBackgroundColor: function(util, customEqualityTesters) {
      compare: function(actual, expected) {
        result.pass = util.equals(extractColor(actual), convertToRGB(expected), customEqualityTesters);
        result.message = 'Expected ' + actual + ' to be color ' + expected';
      }
   }
}

jasmine.addMatchers(customMatchers);

function convertToRGB(color) {
  // convert a named color to rgb
}

function extractColor(domElement) {
  // extract background color from dom element
}

And to use it:

expect(downloadButton).toHaveBackgroundColor("midnight blue");

I haven't tried this out, but this is the basic idea of what you need.

Convert RGBA to RGB taking background into consideration

It looks like you're trying to use the common method for blending, but the incremental loop is throwing me off. Pulled from the OpenGL FAQ:

"The typical use described above [for blending] modifies the incoming color by its associated alpha value and modifies the destination color by one minus the incoming alpha value. The sum of these two colors is then written back into the framebuffer."

So instead of a while loop, use:

alpha = 1 - RGBA.alpha;
RGB.red = Math.round((RGBA.alpha * (RGBA.red / 255) + (alpha * (bg.red / 255))) * 255);
RGB.green = Math.round((RGBA.alpha * (RGBA.green / 255) + (alpha * (bg.green / 255))) * 255);
RGB.blue = Math.round((RGBA.alpha * (RGBA.blue / 255) + (alpha * (bg.blue / 255))) * 255);

PHP convert ARGB to RGBA?

ARGB contains 4 groups of HEX values(channels): Alpha, Red, Green, Blue.

Scheme:
Exampe: #ff502797 - color in ARGB formatt
Elements on positions:

0,1 - Alpa  (ff)
2,3 - Red   (50)
4,5 - Green (27)
6,7 - Blue  (97)

After this convert each channel to decimal. And putt on their places into RBGA:
rgba(Red,Green,Blue,Alpha) - rgba(80,39,151,1)

Example function:

function argb2rgba($color)
    {
        $output = 'rgba(0,0,0,1)';

        if (empty($color))
            return $output;

        if ($color[0] == '#') {
            $color = substr($color, 1);
        }

        if (strlen($color) == 8) { //ARGB
            $opacity = round(hexdec($color[0].$color[1]) / 255, 2);
            $hex = array($color[2].$color[3], $color[4].$color[5], $color[6].$color[7]);
            $rgb = array_map('hexdec', $hex);
            $output = 'rgba(' . implode(",", $rgb) . ',' . $opacity . ')';
        }

        return $output;
    }

computing RGBA to match an RGB color

You mean you want the RGBA color with maximum transparency which, when drawn on top of a white background, gives the original RGB color?

Let R₀, G₀ and B₀ be the components of the original color, each ranging from 0.0 to 1.0, and let R, G, B and A be the components of the new RGBA color (with A = 1 denoting 100% opacity). We know that the colors must satisfy:

R₀ = A·R + (1 − A)

G₀ = A·G + (1 − A)

B₀ = A·B + (1 − A)

which, if we knew A, we could easily solve for R, G and B:

R = (R₀ − 1 + A) / A = 1 − (1 − R₀) / A

G = (G₀ − 1 + A) / A = 1 − (1 − G₀) / A

B = (B₀ − 1 + A) / A = 1 − (1 − B₀) / A

Since we require that R ≥ 0, G ≥ 0 and B ≥ 0, it follows that 1 − R₀ ≥ A, 1 − G₀ ≥ A and 1 − B₀ ≥ A, and therefore the smallest possible value for A is:

A = max( 1 − R₀, 1 − G₀, 1 − B₀ ) = 1 − min( R₀, G₀, B₀ )

Thus, the color we want is:

A = 1 − min( R₀, G₀, B₀ )

R = 1 − (1 − R₀) / A

G = 1 − (1 − G₀) / A

B = 1 − (1 − B₀) / A

---

Ps. For a black background, the same formulas would be even simpler:

A = max( R₀, G₀, B₀ )

R = R₀ / A

G = G₀ / A

B = B₀ / A

---

Pps. Just to clarify, all the formulas above are for non-premultiplied RGBA colors. For premultiplied alpha, just multiply R, G and B as calculated above by A, giving:

R = A · ( 1 − (1 − R₀) / A ) = R₀ − (1 − A)

G = A · ( 1 − (1 − G₀) / A ) = G₀ − (1 − A)

B = A · ( 1 − (1 − B₀) / A ) = B₀ − (1 − A)

(or, for a black background, simply R = R₀, G = G₀ and B = B₀.)

---

Related Topics