Kevin Powell - Community•3mo ago

how do i get this image purple

As you can see in the design the image is purple but the image given to me is black and white and i want to coor it like this how do i color the image purple?

21 Replies

Code-S ♛OP•3mo ago

ἔρως•3mo ago

tint it in photoshop, paint.net, gimp or photopea or, just put a purple background color and make the element with the image semi-opaque

snxxwyy•3mo ago

I’m pretty sure you can either do this with filter or border-image

Code-S ♛OP•3mo ago

i tried with filter but i cant find the purple color any css solution?

snxxwyy•3mo ago

That is a css solution I can’t quite remember what one it is but it could also be background-blend-mode

capt_uhu•3mo ago

yep, yep was also about to recommend background-blend-mode: darken; with a purple background color

snxxwyy•3mo ago

Hm that one didn’t work for me. I was thinking something like this.

div {
  background: purple;
}

img {
  mix-blend-mode: multiply;
}

div {
  background: purple;
}

img {
  mix-blend-mode: multiply;
}

capt_uhu•3mo ago

ahh, i guess it would depend if you are using an img tag for this or using it as a background image

snxxwyy•3mo ago

Oh yeah that’s my bad, I tried to use it on a normal image haha

Jochem•3mo ago

you can layer backgrounds too:

background: linear-gradient(rgba(120 0 120 / 0.5), rgba(120 0 120 / 0.5)), url('https://cdn.discordapp.com/attachments/1295364528325918720/1295364630390112279/image-header-mobile.jpg?ex=670e61d2&is=670d1052&hm=d865f5386fcbbd00e0bcf9f1467881483d42cd064efbfc428a2adcace6b615e1&');

background: linear-gradient(rgba(120 0 120 / 0.5), rgba(120 0 120 / 0.5)), url('https://cdn.discordapp.com/attachments/1295364528325918720/1295364630390112279/image-header-mobile.jpg?ex=670e61d2&is=670d1052&hm=d865f5386fcbbd00e0bcf9f1467881483d42cd064efbfc428a2adcace6b615e1&');

you need the linear gradient to and from the same color (though why not have different shades, gradients add at least 15% cool) for Reasons (color can only be the last property, and you can't set the transparency on a background) but the best way really is to just make the image purple like Epic suggested, unless you need this specific image in several shades

Code-S ♛OP•3mo ago

I used gimp thanks guys

ἔρως•3mo ago

i forgot you can do this 🤦 this is the best solution

Jochem•3mo ago

it's super duper handy

ἔρως•3mo ago

i used it a few times myself, but forgot about it

Chris Bolson•3mo ago

This could be done with filter: hue-rotate(Xdeg);however this won't work on black & white images as it needs a color to rotate. A trick to get round this is to first convert to sepia and then hue-rotate. filter: sepia(100%) hue-rotate(250deg);

vince•3mo ago

nah I think the css solution is better here - that way clients can upload any image and it'll still fit within the design

ἔρως•3mo ago

but the downside is that that has to be calculated every frame on scroll, which can be a battery drain on weaker phones and for that, the image is vastly superior it is nice to be able to do it with css, but it is hella inneficient

vince•3mo ago

ohhh I didn't know that if you're working with some CMS or backend system you could probably apply some transform to it beforehand too that could work better

ἔρως•3mo ago

that is the only reason i avoided suggesting the filter the gradient background is probably less inneficient that could, yeah. and i see the value of doing it purely in css too but, for something like this, i pick gimp and then optimize the image into a webp 🤢

vince•3mo ago

Ye I just think about it as like, what if clients are working on the site and what if they upload a non-purple image? Then it would break the design a bit

ἔρως•3mo ago

it is a good way of rhinking thinking but, for this specific instance, i think it is a lot easier to just get it done on gimp and export as a webp

Gaming

Programming

how do i get this image purple