etoxin / complementary-colors

Get complementary colors

complementary-colors

Get complementary colors.

Installtion

$ npm install complementary-colors

Usage

var complementaryColors = require('complementary-colors');

Constructors

var myColor = new compColors('#00ff00');

Getters

Base color in all examples is #00ff00

Primary

Returns the original color as a rgb object.

myColor.primary();

// returns
// [ { r: 0, g: 255, b: 0 } ]

Complementary color scheme

Complementary Colors are any two Hues positioned exactly opposite each other on the Basic Color Wheel.

Returns an array with two rgb color objects.

myColor.complementary();

// Returns
// [ { r: 0, g: 255, b: 0 }, { r: 255, g: 0, b: 255 } ]

Triadic color scheme

A triadic color scheme uses three colors that are evenly spaced around the color wheel. Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.

Returns an array with three rgb color objects.

myColor.triad();

// Returns
// [ { r: 0, g: 255, b: 0 },
//   { r: 0, g: 0, b: 255 },
//   { r: 255, g: 0, b: 0 } ]

Square color scheme

The square color scheme is similar to the Triadic, but with all four colors spaced evenly around the color circle.

Returns an array with four rgb color objects.

myColor.square();

// Returns
// [ { r: 0, g: 255, b: 0 },
//   { r: 0, g: 127, b: 255 },
//   { r: 255, g: 128, b: 0 },
//   { r: 255, g: 0, b: 255 } ]

Analogous color scheme

Analogous color schemes use colors that are next to each other on the color wheel.

Returns an array with three rgb color objects.

myColor.analogous();

// returns 
// [ { r: 128, g: 255, b: 0 },
//   { r: 128, g: 255, b: 0 },
//   { r: 0, g: 255, b: 0 } ]

Split-Complementary color scheme

The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement.

Returns an array with three rgb color objects.

myColor.splitComplementary();

// returns 
// [ { r: 0, g: 255, b: 0 },
//   { r: 128, g: 255, b: 0 },
//   { r: 0, g: 255, b: 0 } ]

Rectangle (tetradic) color scheme

The rectangle or tetradic color scheme uses four colors arranged into two complementary pairs.

myColor.tetradic();

// returns
// [ { r: 0, g: 255, b: 0 },
//   { r: 0, g: 127, b: 255 },
//   { r: 255, g: 128, b: 0 },
//   { r: 127, g: 0, b: 255 } ]

Examples

var compColors = require('complementary-colors');

var myColor = new compColors('#00ff00');

console.log(myColor.complementary());

// Returns
// [ { r: 0, g: 255, b: 0 }, { r: 255, g: 0, b: 255 } ]

complementary-colors's Issues

Difference between color and hslColor

I was just trying this out and was getting an unexpected result where the returned "primary" colours where slightly different to the inputted base colour. This seems to come down to the base colour having two different values - "color" and "hslColor" (both of which are RGB colours).

For example, if I do var myColor = new compColors('#1ecbe1'), the value of myColor is:

{ "color": { "r": 30, "g": 203, "b": 225 }, "hslColor": { "r": 31, "g": 202, "b": 224 } }

Why the two slightly different RGB values here? A rounding issue? When converting these back to hex it seems the "color" variant is the accurate representation of the original hex. Unfortunately, it is the inaccurate "hslColor" variant that appears to be used in the calculations. So myColor.primary() for example returns [ { "r": 31, "g": 202, "b": 224 } ], and perhaps more importantly, the other colours (complementary etc) are slightly off too.

Complementary color

let mc = new compColors("#FFFFFF");
console.log(mc.complementary());

//[{r: 255, g: 255, b: 255}, {r: 255, g: 255, b: 255}]

Am I missing something or isnt the complementary supposed to be 0,0,0???

Analogous colours seem to be wrong?

Looking at the code, does rotate -30 work? Shouldnt the array return 3 different colours rather than the current two?