How to re-colour a ring in real time using CSS blend mode.

A quick post to share a proof of concept test I did recently

It’s pretty common in the jewellery industry for a product shot of a white gold ring to be manually recoloured in Photoshop to show what it would look like in rose gold and yellow gold. When I saw this manual work I wondered whether it would be possible to do this recolouring on the fly using CSS blend modes. It turns out you can, and the results look fairly good.

How does it work?

It’s very simple. Take a div and set its background-blend-mode CSS rule to color. Then set two comma-separated values on the background-image — the first being a linear-gradient of the colour you’d like to tint the image to, followed by the URL of the image itself.

Here’s an example implementation…

<div class="ring"></div>
<div class="ring rose"></div>
<div class="ring yellow"></div>
<style>
  .ring {
    width : 400px; 
    height : 400px;
    background-blend-mode : color;
    background-image : url(ring.jpg);
  }
  .ring.rose {
    background-image : linear-gradient(to right, #F2BD9D, #F2BD9D),url(ring.jpg);
  }
  .ring.yellow {
    background-image : linear-gradient(to right, #FDE6BA, #FDE6BA),url(ring.jpg);
  }
</style>

Or, rather than making CSS classes, you could just apply the CSS rule directly to the div tag dynamically using Javascript — as I’ve done in this Codepen demo…

Limits

This method is good but it has its limits. You can only us it on products without diamonds, and the image can’t have anything going on in the background. Otherwise you’ll end up recolouring bits that you don’t want recoloured*.

Finally as this was just a quick test I’ve not browser tested it so you might want to do that if you want to use this in a real world project.

That’s it for now. Hopefully I’ve saved someone a few hours of Photoshop toil!

* idea for next project: do recolouring server side using ImageMagic and train machine learning to recognise metal areas in image. Build masks so only metal is recoloured.