Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: not2easy
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?
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?
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.
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)
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!
[edited by: Robin_reala at 12:53 pm (utc) on May 31, 2007]
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.