: "Darkening" a colour so that it's equivalent to the original when made transparent When you make a colour partly transparent, it lightens (assuming it's on a white background), naturally. I would
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.
More posts by @Steve758
3 Comments
Sorted by latest first Latest Oldest Best
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..
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.