CSS Opacity calcuator

[Orange_XL]

I have an element (div) with an opacity-value of 50%. I need to render an element beneath it (div with text, which need to shine through the div with the opacity value)) but it has to have a specific color after shining through. The div-element with the opacity of 50% has its own specific color, making it quite difficult to find the correct color for the underlying element :-(

So I'm looking for a program which allows me to calculate colors, taking into account the opacity-value of elements over it in and their respective color. Does something like that exists? Can I do it by hand with a certain formula?

[Dabrowski]

I don't know of anything, although I would try to find a formula to add them together, and reverse it using your known values, but it will be a maths nightmare.

I would set up the scenario in a paint program, and fiddle with the bottom layer until I got the colour I wanted.

Alternatively, can't you just add the text on top? Make 3 layers, background (or rest of page), then your overlay, then your text?

[Orange_XL]

Fiddling in a paint program is a lot of work. I tried that for one easy colour, but it took me a hundred tries or more to get an exact color match.

Using different layers is not really an option. Both elements will contain text eventually, they need to be in a very specific order, must be easily adjustable for different environments (e.g. screen, print, text-only) and be of minimal html (SEO consideration). Normally I would have fallen back to use different layers to get the effects, but that isn't an option.

Plus, I like the challenge. I know it can be done, it is the best way to do it and I probably want to use it more in the future.

[wtkad]

I haven't tested this thoroughly (only in grayscale for easiness), but I've always liked algebra.

When you combine one color with half of another, you get half of each, or in other words, an average of the two. I think.

So let's name your three colors:
e for the end color you want (regebe = red, green, blue)
t for the top color (rtgtbt)
u for the under color (rugubu)

So:
regebe = (rtgtbt + rugubu) / 2
The end color is the average of the top and under colors.

You want to know the under color, so solve for that:

rugubu = 2*regebe - rtgtbt

To make that useful, you'll need to break it down for each part:
ru = 2*re - rt
and so on.

To get straight HTML values, use the HEX mode on your scientific calculator, or you can convert them to decimal and then switch it back. It works for grayscale, so I hope it works for colors too!

[Dabrowski]

ok, so say the top is 25% opaque, would this be true?

regebe = ( rtgtbt *0.25) + ( rugubu *0.75)

[wtkad]

Should be! You end up seeing 25% of the top color, and 75% of the bottom, so the end should be calculated just like that.

[Dabrowski]

So to reverse it (trying to make the forumla a bit more generic) you'd have

rugubu = (regebe *numberoflayers) -(rtgtbt *0.25) -(otherlayer *itsopacity)

?

I hear a lot about the 'alpha' of a colour, do you know what that relates to?

[Robin_reala]

Alpha refers to the degree of translucency of a colour, from completely opaque to completely transparent. CSS3 introduces the rgba() colour notation which will let you specify your colours to have a degree of translucency, which will make the tiling of transparent PNGs for background translucency a thing of the past. And will allow you to do neat things like translucent borders as well.

[edited by: Robin_reala at 12:53 pm (utc) on May 31, 2007]

[wtkad]

I think the generic formula would be more like this:

regebe = (r1g1b1 * a1) + (r2g2b2 * a2) + ... + (rngnbn * an)

where n is the number of layers, and the 'a' alpha values as explained above are the percent that you see in the final result (as in 75% or 0.75), which gets more complicated with more than one layer. The total should never be more than 100%. I think that would take another formula.

To solve for r1g1b1, you end up with:

r1g1b1 = (regebe - (r2g2b2 * a2) - ... - (rngnbn * an)) / a1

In my first example I kind of did it backwards, because I wrote it as "*2", but really you're dividing by ".5". Same thing in the end, but to put it correctly, it should be:

regebe = (rtgtbt*.5) + (rugubu*.5)
rugubu = (regebe - (rtgtbt * .5)) / .5

Again, only tested with one very simple example, so insert disclaimers here.