JSFiddle - React, Tailwind, and code Playground

by Sarah Giles

HTML

<h3>CMYK</h3>
<label>c: <input id="c" type="number"></label>
<label>m: <input id="m" type="number"></label>
<label>y: <input id="y" type="number"></label>

<br> <br>

<label>aw: <input id="aw" type="number"></label>
<label>ac: <input id="ac" type="number"></label>
<label>am: <input id="am" type="number"></label>
<label>ay: <input id="ay" type="number"></label>

<h3>RGB</h3>
<label>ar: <input id="ar" type="number" ></label>
<label>ag: <input id="ag" type="number"></label>
<label>ab: <input id="ab" type="number"></label>

<h3>X?</h3>
<label>rx: <input id="rx" type="number"></label>
<label>gx: <input id="gx" type="number"></label>
<label>bx: <input id="bx" type="number"></label>

<h3>RGB final</h3>
<label>r: <input id="r" type="number"></label>
<label>g: <input id="g" type="number"></label>
<label>b: <input id="b" type="number"></label>

<button id="btnSubmit">Fill in Numbers</button>

JavaScript

$(document).ready(function() {
  fillValues = function(cyan, magenta,yellow,black){
    var cyan = 0.74;
    var magenta = 0.92;
    var yellow = 0.43;
    var black = 0.4
    var c = cleanCMYKColor(cyan, black);
    var m = cleanCMYKColor(magenta, black);
    var y = cleanCMYKColor(yellow, black);

    var aw= (1 - c) * (1 - m) * (1 - y);
    var ac = c * (1 - m) * (1 - y);
    var am = (1 - c) * m * (1 - y);
    var ay = (1 - c) * (1 - m) * y;

    var ar = (1 - c) * m * y;
    var ag = c * (1 - m) * y;
    var ab = c * m * (1 - y);

    var rx = aw + 0.9137 * am + 0.9961 * ay + 0.9882 * ar;
    var gx = aw + 0.6196 * ac + ay + 0.5176 * ag;
    var bx = aw + 0.7804 * ac + 0.5412 * am + 0.0667 * ar + 0.2118 * ag + 0.4863 * ab;

    var r = rx * 255;
    var g = gx * 255;
    var b = bx * 255;

 		$("#c").val(c);
    $("#m").val(m);
    $("#y").val(y);
    
    $("#aw").val(aw);
    $("#ac").val(ac);
    $("#am").val(am);
    $("#ay").val(ay);

		$("#ar").val(am);
    $("#ag").val(ay);
    $("#ab").val(ab);
    
    $("#rx").val(rx);
    $("#bx").val(bx);
    $("#gx").val(gx);
    
    $("#r").val(r);
    $("#b").val(b);
    $("#g").val(g);

};
cleanCMYKColor = function(color, black) {
	return ((color + black) / 2 ) > 1 ? 1 : ((color + black) / 2 ) 
};
    $("#btnSubmit").click(function(){
      fillValues(74,92,43,50);
    });
  
});