PHP Dynamically Change Color Of Image

Live stream set for 2025-11-19 at 14:00:00 Eastern

Ask questions in the live chat about any programming or lifestyle topic.

This livestream will be on YouTube or you can watch below.

How to Dynamically Change the Color of an Image with PHP

Introduction:

In this tutorial, we’ll explore how to dynamically change the color of an image on a webpage using PHP. Specifically, we will learn how to take a white shoe image and change its color (for example, to red or green) on the fly, based on user input. This technique can be used for various applications like product customization in e-commerce websites or for fun interactive features.

What You Will Learn:

• How to use PHP’s GD Library to manipulate images.
• How to dynamically change an image color based on user input.
• How to integrate PHP image manipulation with a simple front-end interface using JavaScript.

Requirements:

• Basic understanding of PHP and HTML.
• A local or live web server with PHP support (e.g., XAMPP, WAMP, or a live hosting environment).
• An image (for example, a white shoe image) that we will modify.

Step 1: Set Up Your Image

Before we start coding, let’s assume we have a white shoe image named shoe_white.jpg. Make sure this image is in the same directory as your PHP script.

Insert a screenshot of the white shoe image here

Step 2: Frontend Setup (HTML & JavaScript)

We’ll start by creating a simple webpage that allows the user to choose the color for the shoe. We will use JavaScript to send the color choice to the server, and PHP will dynamically change the image color.

Here’s the HTML and JavaScript code:

<h1>Change Shoe Color</h1>
<button onclick="changeShoeColor('red')">Red</button>
<button onclick="changeShoeColor('green')">Green</button>

<img id="shoe" src="shoe_white.jpg" alt="Shoe">

<script>
  function changeShoeColor(color) {
    fetch(`changeColor.php?color=${color}`)
      .then(response => response.blob())
      .then(imageBlob => {
        const imageUrl = URL.createObjectURL(imageBlob);
        document.getElementById('shoe').src = imageUrl;
      })
      .catch(error => console.error('Error:', error));
  }
</script>

In the code above, when the user clicks on the “Red” or “Green” button, JavaScript sends a request to changeColor.php, passing the color parameter. The PHP script then processes the image and returns the modified image as a response.

Step 3: Backend Setup (PHP)

Now, we need to create the PHP script that will process the image and change its color. The script will load the image, look for white pixels, and replace them with the requested color.

Here’s the PHP code for changeColor.php:

header('Content-Type: image/jpeg');

// Get the color from the request
$color = isset($_GET['color']) ? $_GET['color'] : 'red';

// Load the white shoe image
$image = imagecreatefromjpeg('shoe_white.jpg');

// Get image dimensions
$width = imagesx($image);
$height = imagesy($image);

// Define colors for red and green
$colors = [
    'red' => imagecolorallocate($image, 255, 0, 0),
    'green' => imagecolorallocate($image, 0, 255, 0),
];

// Choose the color based on the query parameter
$targetColor = isset($colors[$color]) ? $colors[$color] : $colors['red'];

// Loop through each pixel and change the color of the white ones
for ($x = 0; $x < $width; $x++) {
    for ($y = 0; $y < $height; $y++) {
        $rgb = imagecolorat($image, $x, $y);
        $r = ($rgb >> 16) & 0xFF;
        $g = ($rgb >> 8) & 0xFF;
        $b = $rgb & 0xFF;
        
        if ($r > 200 && $g > 200 && $b > 200) {
            imagesetpixel($image, $x, $y, $targetColor);
        }
    }
}

// Output the modified image
imagejpeg($image);

// Clean up
imagedestroy($image);

In the PHP code above, we:

1. Load the white shoe image.
2. Define the target colors (red and green).
3. Loop through every pixel, and if it’s a “white” pixel (RGB values close to 255), we change it to the desired color.

Step 4: Test the Dynamic Color Change

Once you’ve added the HTML and PHP files to your server, load the HTML file in a browser. When you click on the “Red” or “Green” buttons, the PHP script will change the color of the shoe dynamically without needing to refresh the page.

Screenshots And Screencast

Conclusion

In this simple tutorial, we demonstrated how to dynamically change the color of an image using PHP’s GD library and JavaScript. You can extend this method for various uses, including custom product selectors or interactive features on your website.

Want to Learn More About PHP?

If you’re new to PHP or want to dive deeper into PHP programming, I recommend checking out my book Learning PHP, which covers the fundamentals of PHP development in a beginner-friendly way.

Additionally, I offer a comprehensive course called Learning PHP that covers all the essential PHP topics you’ll need to build dynamic web applications.

Need One-on-One Help?

If you’re looking for personalized help with PHP programming or need assistance with updating or migrating your PHP applications, feel free to contact me for one-on-one programming tutorials.

Thanks for reading, and happy coding!