ARTICLE AD BOX
The picker layout is good, but as it was stated in the comments, in order to handle selected color changes you have to use some JS. There are two color update events for the color input: change (that fires when the picker dialog is closed after selection) and input (firing on every change). You can read more about them in the MDN Docs. I'll go with the second one:
<div class="container"> <!-- Some layout --> <label for="myColor" class="form-label">Color picker</label> <input type="color" id="myColor" value="#CCCCCC" title="Choose a color"> <h2 id="selected">Waiting for color selection...</h2> </form> </div> <!-- You can place the script at the end of <body> or in a separate file --> <script> const picker = document.getElementById("myColor"); const selected = document.getElementById("selected"); picker.oninput = e => { selected.style.color = e.target.value; // color info selected.innerText = e.target.value; // colored text } </script>The color data provided by e.target.value is the RGB value, so it should be easy to convert it to the CMYK scale (taken from here, removed input validation for simplicity):
function rgb2cmyk(rgb) { var computedC = 0; var computedM = 0; var computedY = 0; var computedK = 0; //remove spaces from input RGB values, convert to int var r = parseInt(rgb.substring(1, 3), 16); var g = parseInt(rgb.substring(3, 5), 16); var b = parseInt(rgb.substring(5, 7), 16); // BLACK if (!r && !g && !b) { computedK = 1; return [0, 0, 0, 1]; } computedC = 1 - (r/255); computedM = 1 - (g/255); computedY = 1 - (b/255); var minCMY = Math.min(computedC, Math.min(computedM,computedY)); computedC = (computedC - minCMY) / (1 - minCMY); computedM = (computedM - minCMY) / (1 - minCMY); computedY = (computedY - minCMY) / (1 - minCMY); computedK = minCMY; return [computedC, computedM, computedY, computedK]; }Now, you can use the calculated CMYK code in the selected field:
picker.oninput = e => { selected.style.color = e.target.value; selected.innerText = rgb2cmyk(e.target.value).join(", "); }