Changing opacity while retaining the original color

[Alan Houser]

I'm wanting to change the opacity of a brand element to see through it, but wondering how to adjust color to keep "on brand".
I know it really depends on the background (behind the element with transparency), but wondering if Pixelmator has some prebuilt effect for this?
If one could add the predicted background color behind the reduced layer, and add such an effect, that would be amazing.

(IMAGE) The opacity on the inverted "V" is lowered 75%; full brand color on the right:

[st3f]

Hi Alan.
I’m not 100% sure what you’re after but would keeping opacity of the logo at 100% and changing the blend mode to ‘color’ be of any use?
Hope this helps.
-Stef.

[Alan Houser]

That worked! Probably the oldest trick in any app— just never knew it was there.
Now I need to do the same with CSS. (joke)

[Alan Houser]

Not really a joke though.
I would want to export the PNG image in full opacity, and in CSS, lower the opacity 75%, so when lowered, the color matches (the 100% version of the solid brand color)

So in essence, I would want to ADD 25% color in Pixelmator (125% color?)

Oh, I have a 100% CSS idea...

[Alan Houser]

This works

.opacity-example {
opacity: .75;
filter: saturate(125%);
}

https://codepen.io/alanhouser/pen/zXwMMx

[st3f]

Glad that helped. I’m worse than useless when it comes to CSS, though. Nasty, icky CSS.