Simple HTML Color Mixer in JavaScript

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:

Asif Mughal

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.

Code Snippet:	Custom color picker
Author:	Cyril Sabbagh
Published:	January 12, 2024
Last Updated:	January 22, 2024
Downloads:	533

License:	MIT
Edit Code online:	View on CodePen

How to Create a Simple HTML Color Mixer in JavaScript

Similar Code Snippets:

Leave a Comment Cancel reply