<!-- This program takes a color as input and produces 10 darker variations of it, each darker by 5% than the previous one. -->

<h2>Darker Color Variations Generator</h2>
<p>
	This program takes a hex color code and generates 10 darker variations of
	it.
</p>
<label for="hexInput">Enter a hex code:</label>
<div class="hexInputDiv">
	<span class="hash">#</span>
	<input type="text" id="hexInput" placeholder="ff0000" />
</div>
<button onclick="generateVariations()">Generate Variations</button>
<div id="output"></div>
* {
	box-sizing: border-box;
}
body {
	font-family: system-ui;
	padding: 20px;
/* 	margin: 0; */
	background-color: #fcf5e5;
}
h2 {
	font-size: 1.4rem;
	margin: 1rem 0;
	line-height: 1.7em;
}
p {
	/* 	font-size: 16px; */
}
.color-block {
	width: 100px;
	height: 50px;
	margin-right: 10px;
}
.variation {
	border-radius: 5px;
	background: whitesmoke;
	/* border: 1px solid #ccc; */
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	text-transform: uppercase;
	color: grey;
	flex-grow: 1;
}
#output {
	margin: 30px auto;
	padding: 10px;
	border-radius: 5px;
}
#hexInput {
	text-transform: uppercase;
	padding: 2px;
	/* border-radius: 4px; */
	border: transparent 0px solid;
	flex-grow: 1;
}
#hexInput:focus {
	outline: none;
	border: none;
}
.hexInputDiv {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin: 10px;
}
.hash {
	background-color: #dbdbdb;
	padding: 2px 10px;
	/* margin-right: 5px; */
}

const hexInput = document.getElementById("hexInput");
hexInput.addEventListener("keydown", function (event) {
	console.log("key", event.key);
	if (event.key === "Enter") {
		event.preventDefault();
		generateVariations();
	}
});

function generateVariations() {
	const hexInput = document.getElementById("hexInput"); // Moved inside the function
	const hexInputValue = hexInput.value;
	console.log("Hex input value is ", hexInputValue);
	const output = document.getElementById("output");
	output.innerHTML = "";
	const hexColor = hexInputValue.replace("#", "");
	const r = parseInt(hexColor.substring(0, 2), 16);
	const g = parseInt(hexColor.substring(2, 4), 16);
	const b = parseInt(hexColor.substring(4, 6), 16);
	for (let i = 0; i < 10; i++) {
		const factor = 1 - i * 0.05;
		const newR = Math.round(r * factor);
		const newG = Math.round(g * factor);
		const newB = Math.round(b * factor);
		const newHex =
			"#" + componentToHex(newR) + componentToHex(newG) + componentToHex(newB);
		const colorBlock = document.createElement("div");
		colorBlock.className = "color-block";
		colorBlock.style.backgroundColor = newHex;
		const colorText = document.createElement("span");
		colorText.textContent =
			newHex + (i === 0 ? "(base color)" : `(${i * 5}% darker)`);
		console.log(newHex);
		const variation = document.createElement("div");
		variation.className = "variation";
		variation.appendChild(colorBlock);
		variation.appendChild(colorText);
		output.appendChild(variation);
	}
}

function componentToHex(c) {
	const hex = c > 255 ? "ff" : c.toString(16);
	return hex.length < 2 ? "0" + hex : hex;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.