Adding additional hex colors to RGB color mixing algorithm

Question

I already have a decent algorithm that is able to combine and mix CMYK colors together. However it is unable to combine additional hex colors without failing. I would like some help in figuring out how I can edit the algorithm to accept other colors. I know its possible to color mix several colors as I've seen it being done in other online free apps.

Another modification I'd like to make is to have the overall mixture at 100%. Currently you can max out all colors at 100% but I'd like to have it where you can only have a percentage of each color to make up to 100%.

Full code can be found here: https://jsfiddle.net/5dsgbne9/30/

Heres the main color mixing algorithm which needs to be modified

var slider = new Slider('#ex1', {
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});

var colorPercentages = {};

var colors = document.getElementsByClassName("colors");

for (let i = 0; i < colors.length; i++) {

  if (!(colors[i].getAttribute("id") in colorPercentages)) {
    colorPercentages[colors[i].getAttribute("id")] = 0;
  }

  colors[i].addEventListener("click", function() {

    colorPercentages[colors[i].getAttribute("id")] = $("#ex1").val();
    colors[i].innerHTML = colors[i].getAttribute("id") + " " + $("#ex1").val() + "%";

    console.log(colorPercentages)
    //formula here!!
    let r = 255 * (1 - colorPercentages.Cyan / 100) * (1 - colorPercentages.Black / 100);
    let g = 255 * (1 - colorPercentages.Magenta / 100) * (1 - colorPercentages.Black / 100);
    let b = 255 * (1 - colorPercentages.Yellow / 100) * (1 - colorPercentages.Black / 100);

    $("body").css('background-color', 'rgb(' + r + ', ' + g + ', ' + b + ')');

  });
}

Answer 1

Give my fiddle a try:

EDIT: New fiddle

https://jsfiddle.net/wg6bp210/15/

My solution requries the rgb information to be present in the element, so:

<button class="colors" id="Yellow" hexa="#ffff00">Yellow</button>

becomes

<button class="colors" id="Yellow" hexa="#ffff00" r="254" g="221" b="0">Yellow</button>

Had to basically rewrite the whole code but the fiddle does everything requested:

• 1) Adds selected colors and updates background color accordingly;
• 2) Updates percentages on buttons accordingly to a total of 100%;
• 3) Implemented a deactivate behavior, to deactivate the color on click, in case it was already activated.