JSFiddle - React, Tailwind, and code Playground

by Owen Hartley

HTML

<form id="form">
	<label>Red:</label><br>
	<input type="text" value="0" name="red"><br>
	<label>Green:</label><br>
	<input type="text" value="0" name="green"><br>
	<label>Blue:</label><br>
	<input type="text" value="0" name="blue"><br>
	<label>Hex:</label><br>
	<label style="font-family:monospace;">#</label><input type="text" value="000000" name="hex">
</form>

CSS

input[type="text"] {
	font-family: monospace;
}

JavaScript

var prevRed = 0;
var prevGreen = 0;
var prevBlue = 0;
var prevHex = 0;
var rgbChange = function() {
	var form = this.parentElement;
	if (!(isNaN(parseInt(form.red.value))||parseInt(form.red.value)<0||parseInt(form.red.value)>255)) {prevRed = parseInt(form.red.value);} else if (form.red.value=='') {prevRed = 0}
	if (!(isNaN(parseInt(form.green.value))||parseInt(form.green.value)<0||parseInt(form.green.value)>255)) {prevGreen = parseInt(form.green.value);} else if (form.green.value=='') {prevGreen = 0}
	if (!(isNaN(parseInt(form.blue.value))||parseInt(form.blue.value)<0||parseInt(form.blue.value)>255)) {prevBlue = parseInt(form.blue.value);} else if (form.blue.value=='') {prevBlue = 0}
	form.red.value = prevRed;
	form.green.value = prevGreen;
	form.blue.value = prevBlue;
	var red = prevRed.toString(16).padStart(2, "0");
	var green = prevGreen.toString(16).padStart(2, "0");
	var blue = prevBlue.toString(16).padStart(2, "0");
	form.hex.value = red+green+blue;
}
var hexChange = function() {
	var form = this.parentElement;
	if (!(isNaN(parseInt(form.hex.value, 16))||parseInt(form.hex.value, 16)<0x0||parseInt(form.hex.value, 16)>0xffffff)) {prevHex = parseInt(form.hex.value, 16);} else if (form.hex.value=='') {prevHex = 0}
	form.hex.value = prevHex.toString(16).padStart(6, "0");
	form.red.value = Math.floor(prevHex/65536);
	form.green.value = Math.floor((prevHex-Math.floor(prevHex/65536)*65536)/256);
	form.blue.value = prevHex-Math.floor(prevHex/256)*256;
}
document.getElementById('form').red.oninput = rgbChange;
document.getElementById('form').green.oninput = rgbChange;
document.getElementById('form').blue.oninput = rgbChange;
document.getElementById('form').hex.oninput = hexChange;