Prismaek

Generate color complements, shades, tints, and tones. Convert between color spaces.

Install

$ npm install prismaek

Usage

To produce complements, use the provided harmonies functions.

See Harmonies.

const { harmonies } = require("prismaek");
const hsv = { h: 153, s: 0.737, v: 0.596 };
/* hue: 153 deg, saturation: 73.7%, value: 59.6% */
const complementary = harmonies.complementary(hsv);
/* [ { h: 153, s: 0.737, v: 0.596 }, { h: 333, s: 0.737, v: 0.596 } ] */

const triadic = harmonies.triadic(hsv);
/* [ { h: 153, s: 0.737, v: 0.596 },
     { h: 273, s: 0.737, v: 0.596 },
     { h: 33, s: 0.737, v: 0.596 } ] */

const analagous = harmonies.analagous(hsv);
/* [ { h: 153, s: 0.737, v: 0.596 },
     { h: 183, s: 0.737, v: 0.596 },
     { h: 213, s: 0.737, v: 0.596 },
     { h: 243, s: 0.737, v: 0.596 } ] */

To explicitly change between color spaces, use the conversion utilities.

See Utilities.

const { utils } = require("prismaek");
const rgb = { r: 75, g: 21, b: 156 };
const hsv = utils.rgb2HSV(rgb);
/* { h: 264, s: 0.865, v: 0.612 } */

Validate color spaces

const hsvSpace = utils.isHSV(hsv);
/* true */
const badHSV = { h: 361, s: 1.001, v: -0.001 };
const notHsvSpace = utils.isHSV(badHSV);
/* false */

Get the color space of a color, using cspace.

const { cspace } = utils;
const color = { h: 312, s: 0.431, l: 0.213 };
const colorSpace = cspace(color);
/* "hsl" */

Dynamically transform color spaces using xspace.

const { xspace } = utils;
const colors = [
  { r: 75, g: 21, b: 156 },
  "#4b159c",
  { h: 264, s: 0.865, v: 0.612 },
  { h: 264, s: 0.763, l: 0.347 },
];
const rgbColors = colors.map((color) => xspace(color, "rgb"));
/* [ { r: 75, g: 21, b: 156 },
     { r: 75, g: 21, b: 156 },
     { r: 75, g: 21, b: 156 },
     { r: 75, g: 21, b: 156 } ] */

API

Harmonies

harmonyName (base [, format])
- base: <Object> | <String> Base color.
- format: <String> Output color space, defaulting to "hsv".
- Returns: <Array<<Object> | <String>> The generated harmony, including the base color.

Generates mathematically proven color harmonies.

const {
  harmonies: { complementary },
} = require("prismaek");
complementary({ r: 40, g: 102, b: 106 }, "hex");
complementary("#009197");

Effects

effectName (base [, format] [, step] [, count])
- base: <Object> | <String> | <Array> Base color, or array of colors.
- format: <String> Output color space, defaulting to "hex".
- step <Number> Step size when generating the effect, a number between 0 and 1. Default is 0.10, or 10%.
- count <Number> Iteration count, defaulting to 5.
- Returns: <Array<<Object> | <String>> The generated effect, including base color.

Generates a color scheme based on popular effects.

const {
  effects: { shade, tint, tone },
} = require("prismaek");
shade("#ee0a97", "rgb", 0.05, 10);
tint({ r: 40, g: 65, b: 106 }, "hex");
tone({ h: 359, s: 0.102, l: 0.696 });

Utilities

xspace

xspace (color, map)
- color <Object> | <String> Base color.
- map <String> Color space to convert to.
- Returns: <Object> | <String> The converted color.

Converts between supported color spaces.

const {
  utils: { xspace },
} = require("prismaek");
xspace("#ee0a97", "rgb"); // { r: 238, g: 10, b: 151 }

cspace

cspace (color)
- color <Object> | <String> Base color.
- Returns <String> color space.

Returns the color space of a color or null.

const {
  utils: { cspace },
} = require("prismaek");
cspace("#d5186c"); // "hex"
cspace({ h: 251, s: 0.891, v: 0.668 }); // "hsv"
cspace({ foo: "bar" }); // null

\2\

<from-space>2<TO-SPACE> (color)
- color <Object> | <String> Base color.
- Returns <Object> | <String> The converted color.

Useful when explicity converting from one color space to another.

const {
  utils: { rgb2Hex, hex2RGB },
} = require("prismaek");
const hex = rgb2Hex({ r: 163, g: 189, b: 254 }); // #a3bdfe
hex2RGB(hex); // { r: 163, g: 189, b: 254 }

Contributing

See our guidelines