Creating CYMK color code generator involve HTML, CSS and JavaScript. Here is the simplified source code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CYMK Color Generator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
input[type="range"] {
width: 80%;
margin: 10px 0;
}
#colorBox {
width: 200px;
height: 200px;
margin: 20px auto;
border: 1px solid #000;
}
#colorCode {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>CYMK Color Generator</h1>
<label for="cyan">Cyan:</label>
<input type="range" id="cyan" min="0" max="100" value="0" oninput="updateColor()">
<label for="magenta">Magenta:</label>
<input type="range" id="magenta" min="0" max="100" value="0" oninput="updateColor()">
<label for="yellow">Yellow:</label>
<input type="range" id="yellow" min="0" max="100" value="0" oninput="updateColor()">
<label for="black">Black (Key):</label>
<input type="range" id="black" min="0" max="100" value="0" oninput="updateColor()">
<div id="colorBox"></div>
<div id="colorCode"></div>
<script>
function updateColor() {
const cyan = document.getElementById('cyan').value / 100;
const magenta = document.getElementById('magenta').value / 100;
const yellow = document.getElementById('yellow').value / 100;
const black = document.getElementById('black').value / 100;
const red = Math.round(255 * (1 - cyan) * (1 - black));
const green = Math.round(255 * (1 - magenta) * (1 - black));
const blue = Math.round(255 * (1 - yellow) * (1 - black));
const color = `rgb(${red}, ${green}, ${blue})`;
document.getElementById('colorBox').style.backgroundColor = color;
document.getElementById('colorCode').textContent = `Color Code: ${color}`;
}
</script>
</body>
</html>