javascript - 向 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

试试我的 fiddle :

编辑:新 fiddle

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>

不得不基本上重写整个代码，但 fiddle 会做所有要求的事情:

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