This JavaScript code creates an interactive HTML color mixer with red, blue, green, and yellow buttons. It allows users to click a color button to add 10% of its color to the preview. The new color is calculated as 90% old color + 10% button color. Similarly, the preview updates instantly and the corresponding hex code is displayed.
Moreover, the users can easily revert to the default white color using a reset button. Easily experiment with color combinations in this user-friendly interface.
How to Create a Simple HTML Color Mixer in JavaScript
1. First of all, copy the following HTML code, and paste it into your HTML file. This code includes a color preview, color buttons, and an informational section:
<div id="container"> <div id='preview'></div> <div id="controller"> <div class="red"></div> <div class="blue"></div> <div class="green"></div> <div class="yellow"></div> </div> <div id="infos"> <input id="colorHex" type="text" value="#ffffff" readonly> <input id="resetButton" type="button" value="reset"></input> </div> </div> <div class="instruction"> <h3>Instructions:</h3> <p>Click on each color to add 10% more of this color. On each click, the new color will be: 90% * (oldColor) + 10% * (ButtonColor)</p> </div>
2. Now, copy the CSS code and paste it into your stylesheet. This will style the color mixer interface, making it visually appealing and user-friendly.
body {
text-align: center;
}
.instruction {
padding-top: 350px;
}
#container {
background-color: rgba(1, 1, 1, 0.7);
width: 300px;
text-align: center;
position: absolute;
margin-top: 20px;
left: 50%;
margin-left: -150px;
}
#preview {
height: 200px;
margin: 5px;
border: 1px solid black;
background-color: rgb(255, 255, 255);
}
.red {
width: 50px;
height: 50px;
background-color: rgb(255, 0, 0);
}
.blue {
width: 50px;
height: 50px;
background-color: rgb(0, 0, 255);
}
.green {
width: 50px;
height: 50px;
background-color: rgb(0, 255, 0);
}
.yellow {
width: 50px;
height: 50px;
background-color: rgb(255, 255, 0);
}
#controller div {
display: inline-block;
margin-top: 5px;
border: 1px solid black;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
#controller {
margin-top: 10px;
background-color: rgb(255, 255, 255);
margin: 5px;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
#infos {
padding-bottom: 5px;
}
3. Finally, copy the JavaScript code and add it to your HTML file, either in the <head> or just before the closing </body> tag. This code handles the color mixing logic and user interactions.
var controller = document.getElementById("controller");
var buttons = controller.children;
var preview = document.getElementById("preview");
var hexInput = document.getElementById("colorHex");
for (var i = 0; i < buttons.length; i++) {
(function(i) {
buttons[i].addEventListener('click', function() {
var buttonColor = getColors(window.getComputedStyle(buttons[i], null).backgroundColor);
var oldColor = getColors(window.getComputedStyle(preview, null).backgroundColor);
var newColor = [Math.floor(0.9 * oldColor[0] + 0.1 * buttonColor[0]), Math.floor(0.9 * oldColor[1] + 0.1 * buttonColor[1]), Math.floor(0.9 * oldColor[2] + 0.1 * buttonColor[2])];
preview.style.backgroundColor = "rgb(" + newColor[0] + "," + newColor[1] + "," + newColor[2] + ")";
console.log("rgb(" + newColor[0] + "," + newColor[1] + "," + newColor[2] + ")");
hexInput.value = "#" + newColor[0].toString(16) + newColor[1].toString(16) + newColor[2].toString(16);
});
})(i);
}
var resetButton = document.getElementById("resetButton");
resetButton.addEventListener('click', function() {
preview.style.backgroundColor = "#ffffff";
hexInput.value = "#ffffff";
});
var getColors = function(rgbStr) {
rgbColors = rgbStr.replace(/[^\d,]/g, '').split(',');
for (var i = 0; i < rgbColors.length; i++) {
rgbColors[i] = parseInt(rgbColors[i]);
}
return rgbColors;
};
That’s all! hopefully, you have successfully created a Simple HTML color Mixer on your web/app project. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
JavaScript Detect Media Query Changes
JavaScript Image Editor Add Text
JavaScript Change Button Text onClick
JavaScript Table Pagination with Search
Scroll Indicator with JavaScript
Simple Vanilla JavaScript Tabs
Animated Weather Card in Vanilla JS
19+ JavaScript Search Box for Table Example & Tutorial
JavaScript Color Wheel Picker
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.