@pitworker/prismaek

Prismaek

A fork of Michael Sterpka's prismaek package with ES6 formatting.

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

Install

$ npm install @pitworker/prismaek

Usage

To produce complements, use the provided harmonies functions.

See Harmonies.

import { Harmonies } from "@pitworker/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.

import { Utils } from "@pitworker/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 color = { h: 312, s: 0.431, l: 0.213 };

const colorSpace = Utils.cspace(color);
/* "hsl" */

Dynamically transform color spaces using xspace.

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) => Utils.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.

import { Harmonies } from "@pitworker/prismaek";

Harmonies.complementary({ r: 40, g: 102, b: 106 }, "hex");

Harmonies.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.

import { Effects } from "@pitworker/prismaek";

Effects.shade("#ee0a97", "rgb", 0.05, 10);

Effects.tint({ r: 40, g: 65, b: 106 }, "hex");

Effects.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.

import { Utils } from "@pitworker/prismaek";

Utils.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.

import { Utils } from "@pitworker/prismaek";

Utils.cspace("#d5186c"); // "hex"

Utils.cspace({ h: 251, s: 0.891, v: 0.668 }); // "hsv"

Utils.cspace({ foo: "bar" }); // null

<from-space>2<TO-SPACE>

<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.

import { Utils } from "@pitworker/prismaek";

const hex = Utils.rgb2Hex({ r: 163, g: 189, b: 254 }); // #a3bdfe

Utils.hex2RGB(hex); // { r: 163, g: 189, b: 254 }