Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Finding "equivalent" color with opacity

Tags:

css

colors

Say I have a background color with a "ribbon" running over it in another solid color. Now, I want the ribbon to be partially transparent to let some details blend through, but still keep the ribbon the "same color" over the background.

Is there a way to (easily) determine, for a given opacity/alpha < 100% of the ribbon color, what RGB values it should have to be identical to its color with 100% opacity over the background?

Here's a picture. Background is rgb(72, 28, 97), ribbon rgb(45, 34, 70). I want a rgba(r, g, b, a) for the ribbon so that it appears identical to this solid color.

enter image description here

like image 990
vicvicvic Avatar asked Sep 01 '12 14:09

vicvicvic


People also ask

How do you determine opacity color?

Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.

How is opacity calculated?

The opacity of a coating is a measure of light that is incident on the coating divided by the amount of light that is transmitted [13–16]. In metallizing, this is more usually expressed as the optical density (OD) of the coating where OD is opacity expressed as a logarithm to base 10.

Does opacity affect color?

Transparency—a common feature of modern web design—affects color appearance and so can add unwanted variation into a site's palette, but this change can be accounted for by calculating a new starting color.

Can RGB values represent transparency?

RGBA is an extension of the RGB color model. The acronym stands for red green blue alpha. The alpha value represents the level of transparency/opacity of the color.


1 Answers

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.

like image 121
Phrogz Avatar answered Oct 16 '22 11:10

Phrogz