Webmasters Gallery

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 with . 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:

1. 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).
2. Place that solid vector area exactly on top of the product JPG.
3. mix-blend-mode: multiply; the SVG.
4. 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.

The post A Color Picker for Product Images appeared first on CSS-Tricks.