I have this color
#EEF1F3. I need an element to have this color as the background color. In this case I need the color to be opaque by a ratio of 5% (opacity: 0.05). But I don’t know how to turn this color darker to create an then make it opaque and then the result should be the exact same color.
In web development (perhaps also in most graphical dev. tools) You need the base color from which you make opaque to end up with your resulting color.
This is with a white background (#FFF)
I am guessing the goal is too find a darker color with the same rgb ratio
But how much darker?
Any tools or calculations for this? How should I go about it?
For white backgroud have
P=the opacity (=0…1) of your foreground color
Y=your wanted apparent foreground color component R,G or B, in scale 0…255
X=the foreground color component R, G or B which you should use to get the wanted apparent color
This is the common transparency equation Y=PX+(1-P)255 as reversed. The transformation is linear, but not proportional.
If you get a value less than zero or over 255, you want something impossible. If you get a decimal part, say the calculated X=60.456, you can use X=60 or 61. Check which of them is subjectively more right. If you have decimal part in all three numbers, you have total 8 combinations to check. In math, of course, the nearest values are the nearest ones, but check it anyway.
ADD: in your case P = 0.05 = 1/20 = 1-0.95 That gives X=20(Y-242.25) Your color RGB=EEF1F3 hex or as well R=238, G=241, B=243 is impossible because you would need negative R and G. The red and green of white are seen too well through the foreground which is 95% transparent.