jquery - 使用 mix-blend-mode 混合 RYB 颜色

Question

目前我正在为初学者艺术课开发一个在线教育工具。为了可视化颜色的混合，我创建了 3 个可拖动的圆圈 (RGB)，用于将光线与屏幕混合模式混合。

这行得通！但是现在我想用 3 原色 (RYB) 完成同样的事情，所以如果我将黄色拖到红色上，我会得到橙色，蓝色过红色会给我紫色等。我还没有找到适合这个的混合模式. 这可能吗？

$(function() {
  $(".color-circle").draggable();
});

.color-circle-light {
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
  mix-blend-mode: screen;
  margin: 1rem;
}

.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: lime;
}

.bg-black {
  background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="bg-black">
  <div class="color-circle color-circle-light bg-red"></div>
  <div class="color-circle color-circle-light bg-green"></div>
  <div class="color-circle color-circle-light bg-blue"></div>
</div>

JSFiddle：https ://jsfiddle.net/t0u2agc3/

标签： jquerycssmix-blend-mode