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
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
I’m pretty sure you can either do this with
filter or border-imagei tried with filter but i cant find the purple color
any css solution?
That is a css solution
I can’t quite remember what one it is but it could also be
background-blend-modeyep, yep was also about to recommend
background-blend-mode: darken; with a purple background colorHm that one didn’t work for me. I was thinking something like this.
ahh, i guess it would depend if you are using an img tag for this or using it as a background image
Oh yeah that’s my bad, I tried to use it on a normal image haha
you can layer backgrounds too:
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
I used gimp
thanks guys
i forgot you can do this 🤦
this is the best solution
it's super duper handy
i used it a few times myself, but forgot about it
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);nah I think the css solution is better here - that way clients can upload any image and it'll still fit within the design
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
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
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 🤢
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
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