PS - Color changeable object using SVG

Question

I'm using Photoshop CC 2015.

For webshop needs I have to create svg file from the below image. The plan is that the color of the object from the image can be fully changed without loos of object relief. The object is the blanket which has the tiny hairs that should be visible regardless of color change. The color of the blanket on the image should be as close as possible to a RGB color that user has entered.

So, I was thinking of making two layers. Bottom layer fully colored by user choice. And the top layer white, i.e. 40% transparent. But, done so, the problem is that the color of the blanket is not as the entered color, as the top layer changes the full image color. So, that doesn't work for me.

Is there any tool in PS that could change the blanket color by entering only RGB color, but that the image remains realistic? Any other ideas how to achieve this?

As I said, it's important that I can change the color programmatically via SVG.

Edit 1:

Thanks to @Scott solution I have achieved what I wanted. But, the problem with exporting to SVG occurred.

As stated in @Scott solution, I made two layers: Bottom "Layer 0" (100% fill, normal bend mode) layer and top "Color Fill 1" (100% fill, Hue bend mode) layer shown on the next image...

When the export to SVG is done, this is what opens in browser

Edit 2:

I made the next example to show the problem.

This is the SVG export window

Answer 1

This seems to work....

• Lighting layer (raster) of the pillow in greyscale with its blend mode set to Multiply
• A solid color fill layer
• Export as SVG and the CSS could be altered to change the color fill layer

---

 <style>
      .cls-1 {
        fill: #00aeef;
        fill-rule: evenodd;
      }

      .cls-2 {
        mix-blend-mode: multiply;
      }
    </style>

---

 <style>
      .cls-1 {
        fill: red;
        fill-rule: evenodd;
      }

      .cls-2 {
        mix-blend-mode: multiply;
      }
    </style>

---

The Multiply mode is important so it only darkens the color adding shadows. Without the proper blend mode, the greyscale layer will alter the overall luminosity of the color fill layer, both light and dark, changing the percieved color.

---

As @mayersdesign points out in the comment below, the Multiply mode may not be supported widely enough. You can instead reverse the layer stack and use the Hue blending mode on the color fill layer - leaving the raster image set to Normal mode. Hue is slightly more supported.

Color change would still merely require CSS editing:

 <style>
      .cls-1 {
        fill: #06fb00;
        fill-rule: evenodd;
        mix-blend-mode: hue;
      }
    </style>

I did apply a Levels correction to the raster image to lighten it a bit so it results in a more color-accurate image. I merely chose Image > Adjustments > Levels and clicked the Auto button.

---

_{I am unable to attached the actual SVG here due to site limitations. Imgur doesn't accept svg and trying to paste the code inline for the svg seems to lock up the site (in Chrome/Mac anyway).}