4

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/

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Tijgerbrood
  • 61
  • 3
  • 1
    Conversion from RGB to RYB isn't straightforward. However there's this library which does it and explains the process very well in the ['How'](http://bahamas10.github.io/ryb/about.html#how) section. The code can be directly lifted from here: https://github.com/bahamas10/ryb/blob/gh-pages/js/RXB.js#L252-L330. To make this work you'll also need to manually calculate the overlapping area between every circle and apply the colour transformation, as CSS doesn't have the ability to transform RYB in to RGB – Rory McCrossan Mar 31 '20 at 08:17
  • 1
    If you can do with simple divs which show a color mixing result, you can use `SASS` with the `mix` color function – Anurag Srivastava Mar 31 '20 at 08:20
  • 3
    You mean in a substractive manner? Like with paint or ink? Then please teach correctly that the primaries are CMY, not RYB. And the blend mode you're looking for would be *multiply*, with a white background https://jsfiddle.net/deoukxzm/. But it won't work with blue and red since it will multiply by 0... – Kaiido Mar 31 '20 at 09:06
  • As @Kaiido says, there are 2 sets of primaries, the additive set (RGB) and the substractive set (CMY). Both sets have a mix mode that supports them. – vals Mar 31 '20 at 09:18
  • 1
    @Kaiido RYB exists as primary color: http://www.compworks.faithweb.com/electronics/theory/light/rgbryb001.html .. it's about the difference between absorption and reflection (one set is the opposite of the other) – Temani Afif Mar 31 '20 at 09:27
  • 1
    @TemaniAfif I know about the difference between substractive and additive color mixings. But while we first though (as in some centuries ago) that RYB were the primary colors of substractive system, we long found out that they are not and that CMY actually are the best. https://science.howstuffworks.com/primary-colors.htm – Kaiido Mar 31 '20 at 09:57
  • Thanks everyone for the help! the RYB is working now. @Kaiido I'm afraid don't decide the content for this project, but the CMY version needs to be added also. Though, when I mix magenta and cyan with multiply, the result is purple. What am I missing? Thanks again. – Tijgerbrood Apr 01 '20 at 10:09

0 Answers0