0

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

rgb ratio

But how much darker?

Any tools or calculations for this? How should I go about it?

  • Yes its possible. Though, not with all color combinations and opacities. And this color looks like it can not be done with 5% opacity. To get you started see this post for stuff. – joojaa Jun 27 at 9:44
  • @joojaa Would 10% make it possible? I am using the color as a picture overlay – Jonas Praem Jun 27 at 10:08
  • If you have a partially transparent color X with opacity Z%, the apparent color depends on what is behind X in the next layer. The smaller Z, the more effect the layer behind X has. Have you a certain fixed color behind X? – user287001 Jun 27 at 18:17
  • Yes white. (#ffffff) – Jonas Praem Jun 27 at 19:18
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.

  • Good answer. Any chance you could include an example (with my color perhaps). I find it a tad hard to grasp. – Jonas Praem Jun 28 at 10:00
  • Sorry, didn't mean to ask for hours of work. I just don't grasp how to calculate the rgb of the new color with a given opacity and only knowing the expected color output. It can be hard to grasp a formula without an example – Jonas Praem Jun 28 at 11:39
  • 1
    @JonasPraem I'm back. You want impossible. If you had 0.05 opaque full black, the apparent R,G and B against white would be all 242.25 and that's the darkest possible apparent grey. – user287001 Jun 28 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.