colors

A library for generating color palettes from a given color.

API Reference

Table of Contents

• Color
  • Parameters
  • toString
  • complementary
  • splitComplementary
  • triadic
  • tetradic
  • monochromatic
  • analogous

Color

A class representing a color in the HSV color space.

Parameters

• h number Hue in degrees (0-360)
• s number Saturation (0-1)
• v number Value (0-1)

toString

Returns a string representation of the color in the form "hsv(h,s,v)", where h is the hue in degrees, s is the saturation, and v is the value.

Examples

const color = new Color(180, 0.5, 0.5);
console.log(color.toString()); // "hsv(180,0.5,0.5)"

Returns string

complementary

Returns a color that is the complementary color of this color. The complementary color is the color directly across the color wheel from this color.

Examples

const color = new Color(180, 0.5, 0.5);
const comp = color.complementary();
console.log(comp.toString()); // "hsv(0,0.5,0.5)"

Returns Color

splitComplementary

Returns an array of two colors that are split complementary to this color. Split complementary colors are colors that are adjacent to the complementary color of this color on the color wheel.

Examples

const color = new Color(180, 0.5, 0.5);
const splits = color.splitComplementary();
console.log(splits.map(c => c.toString())); // ["hsv(150,0.5,0.5)", "hsv(210,0.5,0.5)"]

Returns Array<Color>

triadic

Returns an array of two colors that are triadic to this color. Triadic colors are colors that are equally spaced from this color on the color wheel.

Examples

const color = new Color(180, 0.5, 0.5);
const triads = color.triadic();
console.log(triads.map(c => c.toString())); // ["hsv(300,0.5,0.5)", "hsv(60,0.5,0.5)"]

Returns Array<Color>

tetradic

Returns an array of three colors that are tetradic to this color. Tetradic colors are four colors arranged into two complementary pairs on the color wheel. This method returns the three colors that complete the tetradic scheme based on this color.

Examples

const color = new Color(180, 0.5, 0.5);
const tetrads = color.tetradic();
console.log(tetrads.map(c => c.toString())); // ["hsv(90,0.5,0.5)", "hsv(0,0.5,0.5)", "hsv(270,0.5,0.5)"]

Returns Array<Color>

monochromatic

Returns an array of n colors that are monochromatic to this color. Monochromatic colors are colors that have the same hue as this color. The colors returned will have the same hue as this color, but with value and saturation increasing or decreasing by the given step size. The value and saturation of the colors will be increased or decreased depending on the value of d.

Parameters

• n number The number of colors to generate. Defaults to 3. (optional, default 3)
• d number A number that determines whether the colors will be generated in a positive or negative direction. 1 will generate colors with increasing saturation and value, while -1 will generate colors with decreasing saturation and value. Defaults to 1. (optional, default 1)

Examples

const color = new Color(180, 0.5, 0.5);
const monochromes = color.monochromatic(3, 1);
console.log(monochromes.map(c => c.toString())); // ["hsv(180,0.67,0.67)", "hsv(180,0.83,0.83)", "hsv(180,1,1)"]

Returns Array<Color>

analogous

Returns an array of colors that are analogous to this color. Analogous colors are colors that are adjacent to each other on the color wheel. This method generates n analogous colors by varying the hue of this color.

Parameters

• n number The number of analogous colors to generate. Defaults to 3. (optional, default 3)

Examples

const color = new Color(180, 0.5, 0.5);
const analogs = color.analogous(3);
console.log(analogs.map(c => c.toString())); // ["hsv(210,0.5,0.5)", "hsv(150,0.5,0.5)", "hsv(120,0.5,0.5)"]

Returns Array<Color>