Color Utils

Usage

API

Code examples

Getting started

To show how to use this code, i'll start with a small function for drawing the colours that our functions output. This can handle either an array of colors or just a single color.

function drawColors(colors){

  // draw a div to wrap our color blocks
  document.write('<div style="overflow: hidden;zoom:1;">');

  // if it's not an array, we'll stick it into an array with just one item
  if (!(colors instanceof Array)) colors = array(colors);

  // cycle through the colors in the array
  for (var i=0; i<colors.length; i++){

    var color = colors[i];

    // draw a 50x50 div with our color as the background color and the name of the color inside the box
    document.write('<div style="');
    document.write('width:50px;');
    document.write('height:50px;');
    document.write('float:left;');
    document.write('line-height: 50px;');
    document.write('color: #fff;');
    document.write('text-align: center;');
    document.write('font-weight: bold;');
    document.write('font-size: 12px;');
    document.write('background-color:#'+color.toHex()+'">');
    document.write(color+'</div>');

  }

  document.write('</div>');

}

Converting colors to different types

Converting colors is nice and easy. You can convert any format to any other format. You can also string functions together.

var red = new Hex('FF0000');
drawColors(red.toRGB());

var red = new Hex('FF0000');
drawColors(red.toCMYK());

Matching colors

Every color object has two functions which can match our color to a palette of colors. One function will match to the websafe palette, and another will match to a user defined palette.

var darkred = new Hex('540000');
drawColors(darkred.websafe());

var darkred = new Hex('540000');
var palette = [
	new Hex("00FF00"),
	new Hex("0000FF"),
	new Hex("0455EE"),
	new RGB(28,199,55),
	new CMYK(1,0,1,0)
]
drawColors(darkred.match(palette));

Color Harmonies

Our color objects also have functions to produce harmonious colors.

var brightred = new Hex('FF0000');
var brightblue = new Hex('00FF00');

// draw a range from bright red to bright blue, with 10 steps, and include the red and blue in the output
var fade = brightred.range(brightblue, 10, true);
drawColors(fade);

var lightred = new Hex('FF9999');
// draw all the colors that are (360/10) degrees apart on the color wheel, starting with light red
var rainbow = lightred.equal(10, true);
drawColors(rainbow);

var lightblue = new Hex('99ccff');
// find colors 150 degrees either side of our light blue
var splitcolors = lightblue.split(true);
drawColors(splitcolors);

var orange = new Hex('FF6600');
// find colors 30 degrees either side of our orange
var analogouscolors = orange.analogous(true);
drawColors(analogouscolors);

var red = new Hex('AA0000');
// draw a rectangle on our color wheel where the first corner is 30 degrees from our starting color
var rec = red.rectangle(30,true);
drawColors(rec);

var red = new Hex('AA0000');
// convert our color to greyscale
var grey = red.greyscale();
drawColors(grey);

var red = new Hex('AA0000');
// decrease the hue on our red
var new_red = red.hue(-20);
drawColors(new_red);

var dullred = new Hex('d73e3a');
// increase the saturation of our dull red
var satred = dullred.saturation(20);
drawColors(satred);

var darkred = new Hex('540c0b');
// increase the saturation of our dull red
var brighred = darkred.brightness(60);
drawColors(brighred);