向 RGB 颜色混合算法添加额外的十六进制颜色

Question

我已经有了一个不错的算法，能够将 CMYK 颜色组合和混合在一起。但是，它无法在不失败的情况下组合其他十六进制颜色。我需要一些帮助来弄清楚如何编辑算法以接受其他颜色。我知道它可以混合多种颜色，就像我在其他在线免费应用程序中看到的那样。

我想做的另一个修改是让整体混合为 100%。目前，您可以将所有颜色最大化为 100%，但我希望您只能将每种颜色的百分比设置为 100%。

完整的代码可以在这里找到： https://jsfiddle.net/5dsgbne9/30/

这是需要修改的主要颜色混合算法

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

试试我的小提琴：

编辑：新小提琴

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

我的解决方案要求元素中存在 rgb 信息，因此：

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

变成

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

基本上必须重写整个代码，但小提琴可以满足所有要求：

• 1) 添加选定颜色并相应更新背景颜色；
• 2) 将按钮上的百分比更新为总计 100%；
• 3) 实现了停用行为，以停用颜色 点击，以防它已被激活。