Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Randomly Change Image Color using HTML CSS and JavaScript ?
In this tutorial, we will explore two approaches to randomly change image color using HTML, CSS and JavaScript. We'll use CSS blend modes and background color techniques to create dynamic color effects.
Approach 1: Using Math.random() with CSS Mix-Blend-Mode
This approach uses the CSS mix-blend-mode property combined with a colored overlay to change the image appearance. We'll generate random RGB colors using JavaScript's Math.random() function.
How It Works
The mix-blend-mode: hue property blends the background color of an overlay div with the underlying image, creating a color-tinted effect. When we change the overlay's background color randomly, the image appears to change color.
Example
<!DOCTYPE html>
<html>
<head>
<title>Random Image Color Change - Method 1</title>
<style>
body {
text-align: center;
padding: 20px;
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
margin: 20px;
}
img {
height: 150px;
width: 350px;
border: 2px solid #ccc;
}
#colorOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: hue;
cursor: pointer;
}
p {
font-size: 18px;
margin: 15px 0;
}
</style>
</head>
<body>
<h2>Click the image to change its color</h2>
<div class="image-container">
<img src="/images/logo.png" alt="TutorialsPoint Logo">
<div id="colorOverlay"></div>
</div>
<p>Current RGB: <span id="currentColor">Click image to start</span></p>
<script>
const overlay = document.getElementById("colorOverlay");
const colorDisplay = document.getElementById("currentColor");
function generateRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return { r, g, b };
}
overlay.addEventListener('click', () => {
const color = generateRandomColor();
const rgbColor = `rgb(${color.r}, ${color.g}, ${color.b})`;
overlay.style.backgroundColor = rgbColor;
colorDisplay.textContent = `RGB(${color.r}, ${color.g}, ${color.b})`;
});
</script>
</body>
</html>
Approach 2: Using Hexadecimal Color Codes with Background
This method generates random hexadecimal color codes and applies them as the image background. It uses an array of hex digits and combines them to create valid color codes.
Implementation Steps
- Create an array containing all hexadecimal digits (0-9, A-F)
- Generate a 6-character hex code by randomly selecting from the array
- Apply the generated color as the image background
- Display the current hex code to the user
Example
<!DOCTYPE html>
<html>
<head>
<title>Random Image Color Change - Method 2</title>
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
min-height: 100vh;
margin: 0;
}
.container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 30px;
max-width: 500px;
margin: 50px auto;
backdrop-filter: blur(10px);
}
h2 {
color: white;
margin-bottom: 20px;
}
img {
width: 350px;
height: 150px;
border: 3px solid white;
border-radius: 10px;
margin: 20px 0;
}
.color-info {
color: white;
font-size: 18px;
margin: 15px 0;
}
#colorCode {
font-weight: bold;
color: #ffeb3b;
}
.generate-btn {
background: #4caf50;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s;
}
.generate-btn:hover {
background: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Random Hex Color Generator</h2>
<img src="/images/logo.png" alt="TutorialsPoint Logo" id="targetImage">
<div class="color-info">
Background Color: #<span id="colorCode">ffffff</span>
</div>
<button onclick="changeImageColor()" class="generate-btn">
Generate Random Color
</button>
</div>
<script>
function changeImageColor() {
// Array of hexadecimal digits
const hexDigits = [
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
"A", "B", "C", "D", "E", "F"
];
let hexCode = "";
// Generate 6-digit hex code
for (let i = 0; i < 6; i++) {
const randomIndex = Math.floor(Math.random() * hexDigits.length);
hexCode += hexDigits[randomIndex];
}
// Apply the color to image background
const image = document.getElementById("targetImage");
image.style.backgroundColor = "#" + hexCode;
// Display the current color code
document.getElementById("colorCode").textContent = hexCode;
}
// Generate initial random color on page load
window.onload = () => {
changeImageColor();
};
</script>
</body>
</html>
Comparison
| Approach | Color Format | Effect Type | Complexity |
|---|---|---|---|
| Mix-Blend-Mode | RGB | Color blending/tinting | Medium |
| Hex Background | Hexadecimal | Background color change | Simple |
Key Points
-
Math.random()generates numbers between 0 and 1 (exclusive) -
Math.floor()rounds down to the nearest integer - CSS
mix-blend-modecreates visual effects by blending colors - RGB values range from 0 to 255 for each color component
- Hexadecimal colors use digits 0-9 and letters A-F
Conclusion
Both approaches effectively change image colors randomly using JavaScript. The mix-blend-mode method creates tinting effects, while the hex background approach changes the underlying background color. Choose based on your desired visual effect and browser compatibility needs.
Updated on: 2026-03-15T23:19:01+05:30
1K+ Views
Advertisements