Color patterns

using jquery color plugin

by toubia95

HTML

<script src="https://raw.github.com/infusion/jQuery-xcolor/master/jquery.xcolor.min.js"></script>
<p>xcolor lighten & darken</p>
<div class="bloc contrasts">
    <div class="color lighten"></div>
    <div class="color"></div>
    <div class="color darken"></div>
    <div class="color more-darken"></div>
</div><br>
<p>xcolor opacity</p>
<div class="bloc opacity">
    <div class="color lighten"></div>
    <div class="color"></div>
    <div class="color darken"></div>
    <div class="color more-darken"></div>
</div><br>
<p>xcolor triad</p>
<div class="bloc triad">
    <div class="color triad-1"></div>
    <div class="color triad-2"></div>
    <div class="color triad-3"></div>
</div><br>
<p>xcolor tetrad</p>
<div class="bloc tetrad">
    <div class="color tetrad-1"></div>
    <div class="color tetrad-2"></div>
    <div class="color tetrad-3"></div>
    <div class="color tetrad-4"></div>
</div><br>
<p>xcolor analogous (ecart=20)</p>
<div class="bloc analogous">
    <div class="color analogous-2"></div>
    <div class="color analogous-3"></div>
    <div class="color analogous-1"></div>
    <div class="color analogous-4"></div>
    <div class="color analogous-5"></div>
</div><br>
<p>xcolor monochromatic</p>
<div class="bloc monochromatic">
    <div class="color monochromatic-2"></div>
    <div class="color monochromatic-3"></div>
    <div class="color monochromatic-4"></div>
    <div class="color monochromatic-5"></div>
    <div class="color monochromatic-1"></div>
</div><br>
<p>xcolor splitcomplement</p>
<div class="bloc splitcomplement">
    <div class="color splitcomplement-1"></div>
    <div class="color splitcomplement-2"></div>
    <div class="color splitcomplement-3"></div>
</div><br>
<p>xcolor rgb extraction & combination</p>
<div class="bloc rgbmanipulation">
    <div class="color rgbextract-1"></div>
    <div class="color rgbextract-2"></div>
    <div class="color rgbextract-3"></div>
    <div class="color rgbextract-4"></div>
    <div class="color...

CSS

/* TESTER http://labs.abeautifulsite.net/jquery-miniColors/ */

/* INFO
# installation de jquery xcolor plugin : http://www.xarg.org/project/jquery-color-plugin-xcolor/
# création de variantes contrastées à partir d'une couleur
# même chose avec ajout de blanc ou de noir en opacity
# Création de variantes chromiques
    # triad
    # tetrad
    # analogous
    # monochromatic
    # splitcomplement
    # rgb-extraction + rgb-combinaison
    # complementary
    # addivitive sans intérête avec couleurs complémentaires
- recréer les mélanges de couleurs de http://colorschemedesigner.com/
    # triad => encours, utiliser getHSV() et HSL css3 colors, les couleurs diffèrent de ColorSchemeDesigner, faire des tests avec photoshop.
    - tetrad
    - analogic
    - accented analogic
- voir également http://matthewbj.github.com/Colors/
*/
p {
    font-size:8px;
    font-family: verdana, sans-serif;
    padding-right: 5px;
    float: right;
}
.bloc {
    padding: 5px;
}
.bloc .color {
    width: 20px;
    height: 20px;
    display: block;
    float: left;
    margin-right : 5px;
}

JavaScript

var MainColor = '#4F2EB9';

// contrats
$(".contrasts .color").css({'background-color' : MainColor});
$(".contrasts .lighten").css({'background-color' : $.xcolor.lighten(MainColor,step=2)});
$(".contrasts .darken").css({
    'background-color' : $.xcolor.darken(MainColor,step=2)});
$(".contrasts .more-darken").css({
    'background-color' : $.xcolor.darken(MainColor,step=3)});

// opacity
$(".opacity .color").css({'background-color' : MainColor});
$(".opacity .lighten").css({'background-color' : $.xcolor.opacity(MainColor, 'white', 0.25)});
$(".opacity .darken").css({'background-color' : $.xcolor.opacity(MainColor, 'black', 0.25)});
$(".opacity .more-darken").css({'background-color' : $.xcolor.opacity(MainColor, 'black', 0.5)});

// triad
$(".triad .color").css({'background-color' : MainColor});
$(".triad .triad-2").css({'background-color' : $.xcolor.triad(MainColor)[1]});
$(".triad .triad-3").css({'background-color' : $.xcolor.triad(MainColor)[2]});

// tetrad
$(".tetrad .color").css({'background-color' : MainColor});
$(".tetrad .tetrad-2").css({'background-color' : $.xcolor.tetrad(MainColor)[1]});
$(".tetrad .tetrad-3").css({'background-color' : $.xcolor.tetrad(MainColor)[2]});
$(".tetrad .tetrad-4").css({'background-color' : $.xcolor.tetrad(MainColor)[3]});

// analogous
var cEcart = 20;
$(".analogous .color").css({'background-color' : MainColor});
$(".analogous .analogous-2").css({'background-color' : $.xcolor.analogous(MainColor,results=5,slices=cEcart)[1]});
$(".analogous .analogous-3").css({'background-color' : $.xcolor.analogous(MainColor,results=5,slices=cEcart)[2]});
$(".analogous .analogous-4").css({'background-color' : $.xcolor.analogous(MainColor,results=5,slices=cEcart)[3]});
$(".analogous .analogous-5").css({'background-color' : $.xcolor.analogous(MainColor,results=5,slices=cEcart)[4]});

// monochromatic
$(".monochromatic .color").css({'background-color' : MainColor});
$(".monochromatic .monochromatic-2").css({'background-color' :...