<!doctype html>
<html>
<head>
<title>CMYK to or from RGB Colour Systems</title>
<script type='text/javascript'>
var r1=0.0000, g1=0.0000, b1=0.0000, c1=0.0000, m1=0.0000, y1=0.0000, k1=0.0000;
function cmyk_rgb() {
var c=document.getElementById('c').value;
var m=document.getElementById('m').value;
var y=document.getElementById('y').value;
var k=document.getElementById('k').value;
//alert('c=' + c + ' m=' + m + ' y=' + y + ' k=' + k);
r1=eval(255.0 * (1.0 - c) * (1.0 - k));
g1=eval(255.0 * (1.0 - m) * (1.0 - k));
b1=eval(255.0 * (1.0 - y) * (1.0 - k));
//alert('r=' + r1 + ' g=' + g1 + ' b=' + b1);
document.getElementById('r').value = Math.floor(r1);
document.getElementById('g').value = Math.floor(g1);
document.getElementById('b').value = Math.floor(b1);
document.getElementById('dcmyk_rgb').style.backgroundColor="rgb(" + Math.floor(r1) + "," + Math.floor(g1) + "," + Math.floor(b1) + ")";
document.getElementById('drgb_cmyk').style.backgroundColor="rgb(" + Math.floor(r1) + "," + Math.floor(g1) + "," + Math.floor(b1) + ")";
}
function rgb_cmyk() { // http://www.rapidtables.com/convert/color/rgb-to-cmyk.htm
var rr=document.getElementById('r').value;
var gg=document.getElementById('g').value;
var bb=document.getElementById('b').value;
var r=eval(rr / 255.0);
var g=eval(gg / 255.0);
var b=eval(bb / 255.0);
var mx=r;
if (eval(g) > eval(mx)) mx=g;
if (eval(b) > eval(mx)) mx=b;
k1 = eval(1.0000 - mx);
if (eval(k1) == 1.0000) {
c1 = 0.0;
m1 = 0.0;
y1 = 0.0;
} else {
c1 = eval((1.0000 - r - k1) / (1.0000 - k1));
m1 = eval((1.0000 - g - k1) / (1.0000 - k1));
y1 = eval((1.0000 - b - k1) / (1.0000 - k1));
}
//alert(c1);
document.getElementById('c').value = c1;
document.getElementById('m').value = m1;
document.getElementById('y').value = y1;
document.getElementById('k').value = k1;
document.getElementById('dcmyk_rgb').style.backgroundColor="rgb(" + Math.floor(rr) + "," + Math.floor(gg) + "," + Math.floor(bb) + ")";
document.getElementById('drgb_cmyk').style.backgroundColor="rgb(" + Math.floor(rr) + "," + Math.floor(gg) + "," + Math.floor(bb) + ")";
}
</script>
</head>
<body style='background-color: #f0fff0;' onload='rgb_cmyk();'>
<h1 style='color:yellow; background-color: violet;' align='center'><br>CMYK to or from RGB Colour Systems<br><br></h1>
<h4 style='color:yellow; background-color: violet;' align='center'><br>Read More <a target=_blank title='CMYK and RGB history information' href='http://cruxcreative.com/rgb-vs-cmyk-when-to-use-which-and-why/'>Here</a><br><br></h1>
<div align='center'>
<table border=1>
<tr><th>CMYK (for printing)</th><th>RGB (for web)</th></tr>
<tr><td align='right'>
C<font color=cyan>yan</font> <input id='c' value='0.7373' type='number' onchange='cmyk_rgb();' step='0.0001' min=0 max=1></input><br><br>
M<font color=magenta>agenta</font> <input id='m' value='0.7059' type='number' onchange='cmyk_rgb();' step='0.0001' min=0 max=1></input><br><br>
Y<font color=yellow>ellow</font> <input id='y' value='0.6431' type='number' onchange='cmyk_rgb();' step='0.0001' min=0 max=1></input><br><br>
K<font color=black>ey</font> <input id='k' value='0.8706' type='number' onchange='cmyk_rgb();' step='0.0001' min=0 max=1></input><br><br>
</td><td align='right'>
R<font color=red>ed</font> <input id='r' value='0.0000' type='number' onchange='rgb_cmyk();' step='1' min=0 max=255></input><br><br>
G<font color=green>reen</font> <input id='g' value='0.0000' type='number' onchange='rgb_cmyk();' step='1' min=0 max=255></input><br><br>
B<font color=blue>lue</font> <input id='b' value='0.0000' type='number' onchange='rgb_cmyk();' step='1' min=0 max=255></input><br><br>
</td></tr>
<tr><td align='center'><input id='cmyk_rgb' type='button' onclick='cmyk_rgb();' value='CMYK to RGB'></input></td><td align='center'><input id='rgb_cmyk' type='button' onclick='rgb_cmyk();' value='RGB to CMYK'></input></td></tr>
</table><table>
<tr><td align='center'><div id='dcmyk_rgb' style='width:80%; height: 100px;'><br><br><br> </div></td><td align='center'><div id='drgb_cmyk' style='width:80%; height: 100px;'><br><br><br> </div></td></tr>
</table>
</div>
</body>
</html>