Sounds kind of like a hard problem doesn’t it? We often don’t have product shots in thousands of colors, such that we can flip out the <img src="product-red.jpg" alt="red product"> with <img src="product-blue.jpg" alt="blue product">. Nor do we typically have products in a vector format such that we can apply SVG fills to them and such.
There is a clever way to do it though, even when your product shots are bitmap graphic files, like JPG or PNG. Kyle Wetton demonstrates, and it’s essentially:
- Make a vector path that covers the area on the JPG that should change color (probably in Photoshop with the Pen Tool and exporting the vector).
- Place that solid vector area exactly on top of the product JPG.
mix-blend-mode: multiply;the SVG.- Change the fill color on the SVG as desired.
Here’s the super cool demo I think it originated from:
See the Pen
Color this sofa! – SVG + Blend Mode trick by Kyle Wetton (@kylewetton)
on CodePen.
And the demo from the article:
See the Pen
Dynamic Colour Picking – Part 3
on CodePen.
It’s worth noting that this only works if the base image is white. If your base product is, say, blue, then you’ll be multiplying your colors with blue and the results won’t be as expected. That being said, this is a great technique if you have the right source files available. It also won’t work in a browser that doesn’t support blending modes, obviously.
Why not hue rotate the image itself?
filter: hue-rotate(90deg);
Hue rotate doesn’t account for brightness or saturation, this method can handle any HEX. Also, taking the t-shirt demo into account, you’d be hue rotating his skin and the background too
Thanks Chris! Both demos are mine, the CodePen demo came first. Thanks heaps for the write up
And by the CodePen demo I mean the couch demo!