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

Question

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

5

我已经有一个不错的算法，可以将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 + ')');

  });
}

- ssj3goku878

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AmmoPT · Accepted Answer

给我的小提琴试一下：

编辑：新的小提琴

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) 实现了取消激活行为，以在单击时取消已激活的颜色，如果它已经被激活。