Welcome to WebmasterWorld Guest from 107.20.75.63

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Opacity calcuator

     
11:43 am on May 30, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 24, 2002
posts:87
votes: 0


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?

11:59 am on May 30, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 29, 2007
posts:1147
votes: 0


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?

12:25 pm on May 30, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 24, 2002
posts:87
votes: 0


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.

12:54 pm on May 30, 2007 (gmt 0)

Junior Member

5+ Year Member

joined:May 17, 2006
posts:48
votes: 0


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!

3:08 pm on May 30, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 29, 2007
posts:1147
votes: 0


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

regebe = ( rtgtbt *0.25) + ( rugubu *0.75)
3:10 pm on May 30, 2007 (gmt 0)

Junior Member

5+ Year Member

joined:May 17, 2006
posts:48
votes: 0


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.
11:45 am on May 31, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 29, 2007
posts:1147
votes: 0


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?

12:51 pm on May 31, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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]

1:32 pm on May 31, 2007 (gmt 0)

Junior Member

5+ Year Member

joined:May 17, 2006
posts:48
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members