2

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.

enter image description here

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.

|improve this question
2

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.

|improve this answer
2

It can work with some blending modes sometimes...colorKeeperExample: Hard Light
...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... colorKeeperExample: 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..

|improve this answer
  • Sorry for the delay. I completely forgot about this question. – Ariane Oct 2 '14 at 22:10
1

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.

RGB CMYK

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.

|improve this answer
  • css does have blend modes but browser support is limited. See html.adobe.com/webplatform/graphics/blendmodes/browser-support – Tims Oct 21 '13 at 9:28
  • Uhm, I'm not talking about altering blend on part of an object. That's just how I faked the visual example. What I want to do is to essentially counteract how transparency lightens my colour on a white background. Expressed a bit like algebra, it would be BaseColor-10%opacity+x+WhiteBackground = BaseColor, and the goal is to find x, and the goal is to make x not be opacity. For example, I did something KIND OF like what I wanted by substracting 10% from each R, G and B value, but that wasn't quite it. Saturation and lightness didn't do it either. – Ariane Oct 21 '13 at 12:17
  • 1
    Did you try shift-clicking with the Eyedropper Tool in the area which contains the color you want? Shift-clicking with the Eyedropper picks up the color on screen as opposed to the color of the object itself. – Scott Oct 21 '13 at 16:41
  • @ariene: Christopher John's answer hints at this a little, but doesn't make it explicit: he is using HSB color model and compensating the saturation by the amount of opacity (similar to your RGB algorithm) – horatio Oct 22 '13 at 17:23
  • @Scott Sorry for the long delay. I completely forgot about this question. Sorry, it looks like the eyedropper tool doesn't make the same color. So far, the only working method I see is to put a square of the full-opacity color behind the 90 % opacity one. – Ariane Oct 2 '14 at 22:14

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.