Make color transparent and keep the same visual color

Question

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.

I have tried to use color hex and pinetools. But it doesn't seem the results are keeping their rbg ratio (the result comes off way less blue).

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?

Answer 1

For white backgroud have

X=(Y-(1-P)255)/P where

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.