Currently I'm working on an online educational tool for a beginners arts class. To visualise the mixing of colours, I created 3 draggable circles (RGB) for mixing light with a screen blend mode.
This works! But now I want to accomplish the same thing with the 3 primary colours (RYB), so if I drag yellow over red, I get orange, blue over red gives me purple, etc. I haven't found a blend mode suitable for this. Is this possible?
$(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/