Recolor a Product with One Image and an HTML Color Input

I decided to write this article after reading a post today from CSS-Tricks called Two Images and an API: Everything We Need for Recoloring Products. No doubt, the article was trying to show off the power of imgix, which is totally fine, but I thought I’d share this technique for recoloring a product with only 1 image!

See the Pen Car Color Change w/ HTML Color Input by Marcus Burnette (@mburnette) on CodePen.

Disclaimer: I saw this technique used recently on Printful for recoloring apparel items, but wanted to demo it myself here. I did not invent this technique, but did build this demo on CodePen. 🙂

First Things First: The Concept

So here goes. The idea is that you use one image with transparency where you want the color to change. Then, you swap out the background color (via CSS) to give the product a different color.

Pairing this with CSS variables for the background color and an HTML color picker makes the whole thing a bit more interactive, but the possibilities here are endless!

Creating the Image

To speed things up a little, I “borrowed” the image of the car from the article I mentioned above. I cloned out the manufacturer logo, but I’m sure you car enthusiasts can still figure it out.

Nevertheless, the point was to clear out the painted part with Photoshop leaving the reflections and non-painted parts and windows visible. There are tons of Photoshop tutorials out there for masking things and the fact that I was “provided” a white car made the whole thing much easier, but this isn’t a Photoshop tutorial, so you’ll have to work that part out on your own. The best Straight razor helps Prevent Razor Burn and Ingrown Hairs
Instead of having multiple blades coming in contact with skin, the straight razor needs just one. Low-grade multi-blade razors can pull on hairs and cut them below the surface of your skin, often causing ingrown hairs

Here is what I ended up with (checker box pattern only for example purposes – that’s the transparent part…)

Note that the background is white. You will need to make sure that the background of the image is the same color as the background of your website. This white part blocks out the color of the container background where it should not be shown.

Bonus: the best part of it all is that you can use the same image for every color, so you could have 200 cars on the page and only 1 image would ever be loaded – which is a HUGE performance savings!

Setting the Scene

Let’s get to coding this up! Here is the HTML I used for the demo, so you can use whatever parts you need:

<h2 class="car-color-picker">CHOOSE A COLOR: <input type="color" value="#41daf9" id="color-picker" /></h2>
<div class="car-wrap" id="car-wrap">
    <img src="color-change-car-base.png" alt="color changing car product">
</div>

The basic idea is that you wrap your product image in a wrapper – in my case, a <div> with a class/ID of “car-wrap”.

I’ve also added an HTML color picker for this demo, but you certainly don’t need to.

Styling It Up

From here, it’s just a matter of styling the wrapping container to include the color that you want the product to be as the CSS “background-color”.

:root {
    --car-color: #41daf9;
}

.car-wrap {
    max-width: 600px;
    width: 80%;
    margin: 0 auto;
    line-height: 0;
    background: var(--car-color);
}

img {
    max-width: 100% !important;
    height: auto !important;
}

Because I wanted to style some other things for the demo (and start to learn CSS variables), I decided to use a variable for the container’s background-color, but you could just set the background color to whatever you want. Note that I also had to set the line-height to “0” to keep it from showing at the bottom of the image.

I used a tiny bit of javascript in the demo to change that variable color (in turn changing all the colored items that use that variable), so check that out if you want to make the color interactive.

That’s all there is to it!

Check Out the Demo on CodePen