|Matching a transparent color to a solid|
Need a method
I hope I can explain this right.
I have a solid blue background color on a web page. Then I have a 800px solid white centered container that is going to hold all my content.
What I want to do is have transparent blue div that while over the white, will be as close to the solid blue page background as I can get it.
Right now I am just eyeballing it. And I would like to know if there is an actual method to figuring this out. I have searched everywhere with no answers.
This is as close as I can get it.
solid blue background = #99ccff
transparent blue over solid white = Opacity 37%, #0099FF
There is no CSS alpha/trans applied. The trans blue is a transparent png image created in illustrator set to 72ppi in RGB color mode (as basic as it gets).
If anyone has a method other than just "eying it", please let me know
Screengrab the image - open in image editor and 'pipette' the colour?
Well that makes more sense... Match the solid to the merged color that the transparent over white produces!
You know what is stupid I did that for a site I did a while back. I guess I was just so dead set and concentrating so much on matching the solid (websafe) color, that I forgot it was much easier to do the reverse.
Hi there CSS_Kidd,
you may find this example of interest.
There is an arithmetical method to calculate the background-color value of the div with opacity
applied, so that it matches the body background-color value.
The arithmetic needs to be applied to both the opacity div and the container div to obtain
the correct result.
The body background-color is #99ccff or rgb(153,204,255).
The container background-color is #ffffff or rgb(255,255,255).
We cannot use your opacity value of 0.37 in this case as it would produce a negative r value.
The minimum value would be 0.4.
Here is the arithmetic....
- body - rgb(153,204,255)
- container - rgb(255,255,255)
- r value=(r*0.4)+(255*0.6)=153, which gives r=0
- g value=(g*0.4)+(255*0.6)=204, which gives g=127
- b value=(b*0.4)+(255*0.6)=255, which gives b=255
- opacity div - rgb(0,127,255) or #007fff
Here is the example..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
background-color:rgb(153,204,255); /* #99ccff */
background-color:rgb(255,255,255); /* #ffffff */
background-color:rgb(0,127,255); /* #007fff */
<!--[if IE 6]>
<div id="div1">opacity 0.4</div>