Transparent Equivalent of Given Color

Transparent equivalent of given color

Have you had a look at ?rgb?

Usage:

rgb(red, green, blue, alpha, names = NULL, maxColorValue = 1)

An alpha transparency value can also be specified (as an opacity,
so ‘0’ means fully transparent and ‘max’ means opaque). If
alpha’ is not specified, an opaque colour is generated.

The alpha parameter is for specifying transparency. col2rgb splits R colors specified in other ways into RGB so you can feed them to rgb.

Finding equivalent color with opacity

Color blending is just a linear interpolation per channel, right? So the math is pretty simple. If you have RGBA1 over RGB2, the effective visual result RGB3 will be:

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

…where the alpha channel is from 0.0 to 1.0.

Sanity check: if the alpha is 0, is RGB3 the same as RGB2? Yes. If the alpha is 1, is RGB3 the same as RGB1? Yes.

If you locked down only the background color and final color, there are a large number of RGBA colors (infinite, in floating-point space) that could satisfy the requirements. So you have to pick either the color of the bar or the opacity level you want, and find out the value of the other.

Picking the Color Based on Alpha

If you know RGB3 (the final desired color), RGB2 (the background color), and A1 (how much opacity you want), and you are just looking for RGB1, then we can re-arrange the equations thusly:

r1 = (r3 - r2 + r2*a1)/a1
g1 = (g3 - g2 + g2*a1)/a1
b1 = (b3 - b2 + b2*a1)/a1

There are some color combinations which are theoretically possible, but impossible given the standard RGBA range. For example, if the background is pure black, the desired perceived color is pure white, and the desired alpha is 1%, then you would need:

r1 = g1 = b1 = 255/0.01 = 25500

…a super-bright white 100× brighter than any available.

Picking the Alpha Based on Colors

If you know RGB3 (the final desired color), RGB2 (the background color), and RGB1 (the color you have that you want to vary the opacity of), and you are just looking for A1, then we can re-arrange the equations thusly:

a1 = (r3-r2) / (r1-r2)
a1 = (g3-g2) / (g1-g2)
a1 = (b3-b2) / (b1-b2)

If these give different values, then you can't make it match exactly, but you can average the alphas to get as close as possible. For example, there's no opacity in the world that will let you put green over red to get blue.

Transparent color vs rgba(0,0,0,0)

Behaviour is exactly the same, but transparent is compatible also with IE8.
RGBA is more advanced (but lacks IE8 support) and allows you to quickly modify it, in case you would like an "almost transparent" color, without need to completely change attribute.

For example, it could be very quick to set

background-color: rgba(0,0,0,0.1);

Due to default behaviour of browsers that ignored unrecognized properties, is possible to combine them in order to use new one in newer browsers, but leave a fallback for older ones, simply typing both of them:

background-color: transparent;
background-color: rgba(0,0,0,0);

Or, more useful, in case of alreasy cited almost transparent backgrounds, you can write:

background-color: transparent;
background-color: rgba(0,0,0,0.1);

New browsers will set rgba(0,0,0,0.1) as background, overriding previous transparent declaration, but IE8 will set transparent as background, because it will ignore unrecognized rgba() value, so a slightly different result but in according to Graceful Degradation principle.

Is there a color code for transparent in HTML?

There is not a Transparent color code, but there is an Opacity styling. Check out the documentation about it over at developer.mozilla.org

You will probably want to set the color of the element and then apply the opacity to it.

.transparent-style{

    background-color: #ffffff;
    opacity: .4;

}

You can use some online transparancy generatory which will also give you browser specific stylings. e.g. take a look at http://www.css-opacity.pascal-seven.de/

Note though that when you set the transparency of an element, any child element becomes transparent also. So you really need to overlay any other elements.

You may also want to try using an RGBA colour using the Alpha (A) setting to change the opacity. e.g.

.transparent-style{
    background-color: rgba(255, 255, 255, .4);
}

Using RGBA over opacity means that your child elements are not transparent.

Transparent ARGB hex value

Transparency is controlled by the alpha channel (AA in #AARRGGBB). Maximal value (255 dec, FF hex) means fully opaque. Minimum value (0 dec, 00 hex) means fully transparent. Values in between are semi-transparent, i.e. the color is mixed with the background color.

To get a fully transparent color set the alpha to zero. RR, GG and BB are irrelevant in this case because no color will be visible. This means #00FFFFFF ("transparent White") is the same color as #00F0F8FF ("transparent AliceBlue").
To keep it simple one chooses black (#00000000) or white (#00FFFFFF) if the color does not matter.

In the table you linked to you'll find Transparent defined as #00FFFFFF.

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

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

Your linked formula on Wikipedia for alpha compositing is all we need to calculate new colors:

This formula is used per color channel (so there's a separate, independent formula for red, green, and blue input and output values). In your particular case, where the color is overlaid on a white background:

• is the color channel value we want to calculate
• is the alpha channel value we want to calculate
• is the color channel value for white (255 or 1 depending on your units)
• is the alpha channel value for solid white (in this case, 1)
• is the input color channel value
• is the input alpha channel value (in this case, 1)

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

Calculating the Alpha

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

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.

Calculating each color

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

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

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(255 - (255 - color) / alpha);
}

function opaqueToAlpha(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
  ];
}

// just used for logging
function convertColor(r, g, b) {
  console.log(`[${r}, ${g}, ${b}] converts to [${opaqueToAlpha(r, g, b).join(', ')}]`);
}

convertColor(54, 201, 85);
convertColor(77, 141, 177);
convertColor(255, 244, 149);

Hex transparency in colors

Here's a correct table of percentages to hex values for opacity. E.g. for 50% white you'd use #80FFFFFF. To think in terms of transparency instead, flip the order of the percentages (more opaque = less transparent).

---