“Darkening” a colour so that it's equivalent to the original when made transparent

Question

When you make a colour partly transparent, it lightens (assuming it's on a white background), naturally. I would like to counter this behaviour by "darkening" a colour, so that when I make it transparent, when on a white background, the end result is the same as the original colour.

Basically, I would like to compensate the effect of transparency. And I have no idea of how I would do that. I've tried playing with some numbers in the colour's parameters, but I haven't been able to find what I should do.

This might be hard to understand in words alone, so I've made a visual explanation of what I would like to achieve.

What I want to achieve is the highest square.

Oh, before a clever one tells me to simply do what I did on that image, of course the example was faked by cutting a piece of transparent orange to put over the area where the "stick" overlaps with a solid-coloured square. Of course, that solution can't be applied to more irregular or changing shapes, and won't handle the white areas of a picture.

In case it's important, what I'm trying to make with this is a web design in Adobe Illustrator, which would of course eventually end up being made out of HTML and CSS.

Answer 1

If you have an object that you make 90% opacity, you are introducing 10% of the color below that object. In theory, if you were to take your original object at 100% opacity (no transparency) and put the same background color in a layer in front of it at 10% opacity, you'd end up with the same 90%-10% ratio, resulting in the same color as the semi transparent original color.

If you take the result of the non-transparent original with the 10% above it, that is your "darkened" or "lightened" version of the original color.

Answer 2

It can work with some blending modes sometimes...
...as you can see on the "Rainbow-Strip" it's not really flexible.
You do need them though. I doubt this works with just opacity.

edit: It does kind of work with opacity...
...only I did it the other way around. Here apparently it works by upping the saturation of the 90% transparent picture by 10. Meaning if the original color already has 100% saturation it won't work, (also when using a different color BG, as John mentioned.)
That's what I found out anyways..

Answer 3

You can try the various blending modes if one of those gets close enough, but barring that, you'll need separate objects. You can't really alter blending on only a portion of a single object.

Of course in HTML/CSS there are no such things as blending modes so you'll have to either use transparency or not and probably resort to multiple objects there as well.