This page is work-in-progress. You can reach me on twitter or mail to rezoner1337@gmail.com

Color

A set of utils for manipulating colors.

Creation

var color = cq.color(arguments);

cq.color("#ff00aa");
cq.color("rgb(32, 64, 128)");
cq.color("rgba(32, 64, 128, 0.5)");
cq.color("hsl(0.5, 1.0, 0.2)");
cq.color("hsv(0.1, 0.4, 0.5)");

cq.color([128, 64, 32]);
cq.color([128, 64, 32, 0.5]);
cq.color([0.5, 0.1, 0.2], "hsl");
cq.color([0.5, 0.1, 0.2], "hsv");
cq.color([0.5, 0.1, 0.2, 0.5], "hsla");
cq.color([0.5, 0.1, 0.2, 0.5], "hsva");

Compounds

var color = cq.color("#fff");

color[0] = 255; /* r - int */
color[1] = 255; /* g - int */
color[2] = 255; /* b - int */
color[3] = 1.0; /* a - float */

String

You can use cq.color straight inside methods that require color as string ex fillStyle()

Conversion

var color = cq.color("#804020");

color.toArray() > [128, 64, 32, 0.5]
color.toRgb()   > "rgb(128, 64, 32)"
color.toRgba()  > "rgba(128, 64, 32, 0.5)"
color.toHex()   > "#804020"
color.toHsl()   > [0.05, 0.6, 0.31]
color.toHsv()   > [0.05, 0.75, 0.5]

Shift

color.shiftHsl(h, s, l);
color.setHsl(h, s, l);

h, s, l range is [0.0, 1.0]

Alpha

color.a(0.5);
color.alpha(0.5);

Example

playground({

  width: 320,
  height: 96,

  container: exampleContainer,

  render: function() {

    this.layer.clear("#004");

    var a = cq.color("#f00");
    var b = cq.color("#f00");
    var c = cq.color("#f00");

    for(var i = 0; i < 10; i++) {

      /* first row - shifting HUE */
      a.shiftHsl(0.1, false, false);
      this.layer.fillStyle(a).fillRect(i * 32, 0, 32, 32);

      /* second row - decreasing SATURATION */
      b.shiftHsl(false, -0.1, false);
      this.layer.fillStyle(b).fillRect(i * 32, 32, 32, 32);

      /* third row - decreasing LIGHTING */
      c.shiftHsl(false, false, -0.05);
      this.layer.fillStyle(c).fillRect(i * 32, 64, 32, 32);
    }

  }

});


Have any questions? Don't hesitate to ask:

Post issues on github, support my work on gratipay author rezoner