Смешивание цветов RYB с режимом смешивания - PullRequest
Новая
       71

Смешивание цветов RYB с режимом смешивания

4 голосов
/ 31 марта 2020

В настоящее время я работаю над онлайновым учебным пособием для начинающих. Чтобы визуализировать смешение цветов, я создал 3 перетаскиваемых круга (RGB) для смешивания света в режиме наложения экрана.

Это работает! Но теперь я хочу сделать то же самое с помощью 3 основных цветов (RYB), поэтому, если я перетаскиваю желтый на красный, я получаю оранжевый, синий на красном дает фиолетовый, и т.д. c. Я не нашел режим смешивания, подходящий для этого. Возможно ли это? 

$(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/

...