How can I convert a color to a semi-transparent version of the same color assuming a white backgroun-CodePudding

The

I'm looking for a formula which would take any opaque color (shown on the left in each scenario above) and output a semi-transparent color which is essentially the equivalent given a white background. It seems to be straightforward for any grayscale color (eg. the first gray: 1-(32/255) -> 0.87), but not sure what to do with other colors.

Note how they appear to be the exact same colors anywhere there is a white background even though they are clearly different colors.

I found a wikipedia page on alpha compositing but I don't know how to use it to do what I want. I saw this question but it's not exactly the same. Finally, I think this "Color to alpha" gimp filter is essentially what I want to do, always using white as the color - but there is no documentation on how it's being done. Any help is appreciated.

Essentially looking for a function like this...

function whiteToAlpha(r, g, b) { // ... return [newR, newG, newB, newAlpha] }

CodePudding user response：

If the background is white then any amount of alpha will be added as color to all three color channels. So we use the min channel to determine the alpha and subtract it from all the channels

function whiteToAlpha(r, g, b) { let alpha = Math.min(r,g,b); return [r-alpha, g-alpha, b-alpha, (255-alpha)/255] }

CodePudding user response：

Multiple Solutions

As you might guess with having three known values and four unknowns, there are multiple solutions, that can have multiple different alpha values. Here I'll assume you want the lowest possible alpha value (and where one of the output color values is 0), since that's what you have in your examples.

Reworking the Alpha Compositing formula

Using the linked formula on wikipedia, the formula for calculating a specific color channel (like, red) is:

$C_o = \frac{ C_a \alpha_a C_b \alpha_b (1 - \alpha_a) }{\alpha_o}$

In your particular case, where the color is overlaid on a white background:

$C_a$ is the color channel value we want to calculate

$\alpha_a$ is the alpha channel value we want to calculate

$C_b$ is the white channel (255 or 1 depending on your units)

$\alpha_b$ is the white channel's alpha value (in this case, 1)

$C_o$ is the input color channel

$\alpha_o$ is the alpha of the overlaid color on white (in this case, 1)

Plugging in the constraints, and using 255 for $C_b$ yields this simplified formula:

$C_0 - 255 = \alpha_a(C_a - 255)$

Calculating the Alpha

For the constraint to have the lowest alpha value possible, this happens when the converted color channel value ( $C_a$ ) is zero. In this case, that would yield this formula:

$\alpha_a = \frac{255 - C_0}{255}$

Since there are three colors, how do you figure out which channel to use? Thankfully each channel uses the same linear equation and the lowest value in each of the input channels will always correspond to the lowest one after conversion. So you can just take the minimum of the input values to calculate the alpha.

$\alpha_a = \frac{255 - min(R_0, G_0, B_0)}{255}$

Calculating each color

From there, you can plug in $\alpha_a$ into our simplified formula:

$C_a = \frac{C_0-255}{\alpha_a} 255$

Where you'd do this for each color channel (red, blue, and green)

Sample Implementation:

Here's an example that uses the above formulas:

function minimumAlpha(color) { return (255 - color) / 255 } function convert(color, alpha) { return Math.floor((color - 255) / alpha 255); } function solidToAlpha(r, g, b) { var alpha = minimumAlpha(Math.min(r,g,b)); // may want to enforce more constraints on alpha return [ convert(r, alpha), convert(g, alpha), convert(b, alpha), alpha ]; } console.log(solidToAlpha(54, 201, 85).toString()); console.log(solidToAlpha(77, 141, 177).toString()); console.log(solidToAlpha(255, 244, 149).toString());