CYB testing

additive and substractive synthesis using jquery xcolor

by toubia95

HTML

<script src="https://raw.github.com/infusion/jQuery-xcolor/master/jquery.xcolor.min.js"></script>
<div class="bloc gradient">
    <div class="first"></div><div class="plus">+</div><div class="last"></div><div class="plus">=</div><div class="mix"></div><div class="plus">Gradient 50%</div>
</div><br>
<div class="bloc additive">
    <div class="first"></div><div class="plus">+</div><div class="last"></div><div class="plus">=</div><div class="mix"></div><div class="plus">Additive</div>
</div><br>
<div class="bloc subtractive">
    <div class="first"></div><div class="plus">+</div><div class="last"></div><div class="plus">=</div><div class="mix"></div><div class="plus">Subtractive</div>
</div><br>
<div class="bloc multiply">
    <div class="first"></div><div class="plus">+</div><div class="last"></div><div class="plus">=</div><div class="mix"></div><div class="plus">Multiply</div>
</div><br>
<div class="bloc average">
    <div class="first"></div><div class="plus">+</div><div class="last"></div><div class="plus">=</div><div class="mix"></div><div class="plus">Average</div>
</div><br>

CSS

body {padding: 10px;}

.first, .last, .mix {
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 2px;
}

.plus {
    display: block;
    width: auto;
    height: 20px;
    float: left;
    margin: 0 2px;
}

JavaScript

var color1 = '#FEF700';
var color2 = '#0071AD';

$(".bloc .first").css({
    'background-color' : color1});

$(".bloc .last").css({
    'background-color' : color2});

$(".gradient .mix").css({
    'background-color' : $.xcolor.gradientlevel(color1, color2, 50, 100)});

$(".additive .mix").css({
    'background-color' : $.xcolor.additive(color1, color2)});

$(".subtractive .mix").css({
    'background-color' : $.xcolor.subtractive(color1, color2)});

$(".multiply .mix").css({
    'background-color' : $.xcolor.multiply(color1, color2)});

$(".average .mix").css({
    'background-color' : $.xcolor.average(color1, color2)});