Recolor a Product with One Image and an HTML Color Input

October 11, 2019

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

Wanna chat about this article or any others? Feel free to DM me or mention me on Twitter @marcusdburnette to start a conversation!

5 Responses

  1. very cool option. I’m going to try this after running into an issue with the one you based it on. I tried it and got it to work but the color picker doesn’t pop up, so it is limited to what colors options I include. but the colors also show up vertical and not horizontally as it shows on codepen. 🙁
    would you happen to know why and would I run into any issue with this approach? I would like to also keep the background in the image I’m trying and got to work with the other approach.
    thanks!

    1. Hey Omar,

      Thanks for reaching out here. The color selector is simply an HTML color input, so if it’s working for you here, that should work just about anywhere else you put it. I’m also not quite sure what you’re experiencing with the colors showing up vertically. Do you have a CodePen or other link so I can take a look?

      1. Hi Marcus, thank you so, so very much for your reply!
        I’m kind of new to some of this, but I was very excited to get it sort of working (although I’m a bi confused as to whether I’ll need to pay Imgix to put this on a site)
        I like that this approach retains more of the reflections with the background because we haven’t afforded photos on infinite backgrounds.
        I think I figured out how to make my own codepen and now I see that the issue shows up there…but it seemed fine when I just edited the code in sample one. So, I guess I’m missing something. https://codepen.io/donamor/pen/jOVVJPv
        I notice that when it works, I see the FFFFF inside the last white color picker circle. As for the vertical issue, I mean that when I tried it on a page the colors wouldn’t be on the bottom right from left to right, but the colors showed up vertically stacked, so if I had many it would be hard to use, but I can always just offer one option- the color picker and maybe an original color.
        thanks for your help.

        1. Hey there, Omar –

          Thanks for the additional details here and the CodePen link! Based on the pen you shared, it looks like you may have headed down the path of the method that inspired my alternate version. Since that one requires a service to process the color change (Imgix), you would eventually have to pay for the service – depending on usage.

          With my method, you actually remove a “hole” in the image that allows the background color of the containing div to shine through. It’s not quite as clean of a look, but only requires loading one image and no third-party service at all!

          I’ve gone ahead and taken your pen/car and recreated the method in a new pen here: https://codepen.io/mburnette/pen/QWGGREv

          Side note – it looked like you also hadn’t included the jscolor library in your pen, so the color picker wasn’t working. I’ve added that in my pen as well so you can take a look. (Make sure to hit the “gear” icon on the JS area to see any included libraries.

          Hopefully, that helps!

          1. sorry for the delay and thank you so much for your reply. I see that you are showing an example with your approach. thanks because I wanted to try it but didn’t think I could do the transparency- and now I see that it does work as expected. I do like the simpler approach, but the other one does work best for the vehicle. I’ll have to see how expensive it can be to use the other way (or maybe even look for an alternative), but I do need to see if I can fix the picker issue and I think I see what you are showing – what is missing – I’ll see if I can fix it and then maybe it will show up properly on a site.
            all the best!

Leave a Reply

Your email address will not be published. Required fields are marked *