Skip to content

Commit

Permalink
v0.2.0:
Browse files Browse the repository at this point in the history
- Adds xspace and cspace to utils (conversion and space checking utilities)
- Various odd bug fixes, such as undefined argument checks.
- Testing via Jest
- Code coverage via Coveralls
- CI/CD with Travis
  • Loading branch information
mster committed May 17, 2021
1 parent 2757990 commit 14edfdd
Show file tree
Hide file tree
Showing 15 changed files with 6,799 additions and 519 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
test.js
node_modules
node_modules
coverage
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
coverage
1 change: 1 addition & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
12 changes: 12 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
sudo: false
language: node_js
node_js:
- 14
- 12
- 10

jobs:
include:
- stage: Generate Coverage
node_js: "node"
script: npm run coverage
203 changes: 93 additions & 110 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,142 +1,125 @@
# Prismaek
# Prismaek [![License: MIT](https://img.shields.io/badge/license-MIT-blue)](https://opensource.org/licenses/MIT) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Build Status](https://travis-ci.com/mster/prismaek.svg?branch=main)](https://travis-ci.com/mster/prismaek) [![Coverage Status](https://coveralls.io/repos/github/mster/prismaek/badge.svg?branch=main)](https://coveralls.io/github/mster/prismaek?branch=main)

Generate custom color schemes using maths. Color type conversion utilities included!
Generate color complements, shades, tints, and tones. Convert between color spaces.

[![License: MIT](https://img.shields.io/badge/license-MIT-blue)](https://opensource.org/licenses/MIT)
# Install

```
$ npm install prismaek
```

# Usage

To produce complements, use the provided `harmonies` functions.

See [Harmonies](#Harmonies).

```js
const prismaek = require('prismaek')

const { splitComplementary } = prismaek.harmonies
const { RGB2HSV } = prismaek.utils

// start with a single color
const rgb = { r: 255, g: 102, b: 69 }

// convert to HSV color format
const hsv = RGB2HSV(rgb) // {h: 11, s: 0.729, v: 1}

// note: HSV (HSB) format is required for scheme generation.
const scheme = splitComplementary(hsv)
/*
[
{ h: 11, s: 0.729, v: 1 },
{ h: 161, s: 0.729, v: 1 },
{ h: 221, s: 0.729, v: 1 }
]
*/
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 } ] */
```

If you need a scheme in a particular form:
![complementary](https://user-images.githubusercontent.com/15038724/118057317-92f8f480-b340-11eb-8a3d-5d3d1ba686ca.png)

```js
let scheme = analagous(hsv)

scheme = scheme.map(e => HSV2RGB(e))
/*
[
{ r: 255, g: 103, b: 69 },
{ r: 255, g: 196, b: 69 },
{ r: 221, g: 255, b: 69 },
{ r: 128, g: 255, b: 69 }
]
*/

scheme = scheme.map(e => RGB2Hex(e))
/*
[ 'FF6745', 'FFC445', 'DDFF45', '80FF45' ]
*/
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 } ] */
```

# Effects
![triadic](https://user-images.githubusercontent.com/15038724/118057439-d9e6ea00-b340-11eb-9638-2ae4cd9ce2be.png)

Prismaek includes an effect builder for generating **tints**, **tones**, and **shades**. Effects have one required argument and three optional arguments.
```js
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 } ] */
```

<br>
![analagous](https://user-images.githubusercontent.com/15038724/118057897-c5572180-b341-11eb-91c3-6f4516ad66ad.png)

### shade(base[, format][, step][, count ])
* #### **base** \<Object> | \<String> | \<Array> Base color object (HSV/RGB), hex value as a string, or an array containing any combination of either.
* #### **format** \<String> Output format. Optional, **Default:** `hex`
* Supported types: `hex`, `rgb`, `hsv`
* #### **step** \<Number> | \<String> Step size. Optional, **Default:** `0.10`
* #### **count** \<Number> | \<String> Iteration count (base color included). Optional, **Default:** `5`
To explicitly change between color spaces, use the conversion utilities.

<br>
See [Utilities](#Utilities).

```js
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

```js
const { shade, tint, tone } = require('prismaek').effects;
const hsvSpace = utils.isHSV(hsv);
/* true */

const badHSV = { h: 361, s: 1.001, v: -0.001 };

const color = { r: 102, g: 55, b: 69 };
const shades = shade(color, "hex", 0.05, 5);
// [ '663745', '613442', '5C323E', '572F3B', '522C37' ]
const notHsvSpace = utils.isHSV(badHSV);
/* false */
```

Works with schemes too. Pretty cool, huh?
Get the color space of a color, using `cspace`.

```js
const color = "#289866";
const tetradicScheme = tetradic(hex2HSV(color));
/* [{ h: 153, s: 0.737, v: 0.596 },
{ h: 243, s: 0.737, v: 0.596 },
{ h: 333, s: 0.737, v: 0.596 },
{ h: 63, s: 0.737, v: 0.596 }] */

const tetradicTones = tone(tetradicScheme, "rgb", 0.1, 3);
/* {
'0': [
{ r: 60, g: 228, b: 153, shift: 0 },
{ r: 69, g: 60, b: 228, shift: 0 },
{ r: 228, g: 60, b: 135, shift: 0 },
{ r: 219, g: 228, b: 60, shift: 0 }
],
'0.1': [
{ r: 56, g: 213, b: 143, shift: 0.1 },
{ r: 64, g: 56, b: 213, shift: 0.1 },
{ r: 213, g: 56, b: 126, shift: 0.1 },
{ r: 204, g: 213, b: 56, shift: 0.1 }
],
'0.2': [
{ r: 52, g: 198, b: 133, shift: 0.2 },
{ r: 60, g: 52, b: 198, shift: 0.2 },
{ r: 198, g: 52, b: 117, shift: 0.2 },
{ r: 190, g: 198, b: 52, shift: 0.2 }
]
} */
const { cspace } = utils;

const color = { h: 312, s: 0.431, l: 0.213 };

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

Finally, something a bit funky.
Dynamically transform color spaces using `xspace`.

```js
let woah = RGBs.map(rgb => tone(triadic(RGB2HSV(rgb))));
/*[
{
'0': [ '950269', '699502', '026995' ],
'0.1': [ '8B0162', '628B01', '01628B' ],
'0.2': [ '81015B', '5B8101', '015B81' ],
'0.3': [ '770154', '547701', '015477' ],
'0.4': [ '6D014D', '4D6D01', '014D6D' ]
},
{
'0': [ 'B972C2', 'C2B972', '72C2B9' ],
'0.1': [ 'AC6AB5', 'B5AC6A', '6AB5AC' ],
'0.2': [ 'A063A8', 'A8A063', '63A8A0' ],
'0.3': [ '945B9B', '9B945B', '5B9B94' ],
'0.4': [ '87548E', '8E8754', '548E87' ]
},
{
'0': [ '995368', '689953', '536899' ],
'0.1': [ '8F4D61', '618F4D', '4D618F' ],
'0.2': [ '85485A', '5A8548', '485A85' ],
'0.3': [ '7A4253', '537A42', '42537A' ],
'0.4': [ '703D4C', '4C703D', '3D4C70' ]
}
] */
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 } ] */
```

# Contributing
Thanks for checking out my package! Contribution guidelines will be coming soon.
# Harmonies

# Effects

Prismaek includes an effect builder for generating **tints**, **tones**, and **shades**. Effects have one required argument and three optional arguments.

<br>

### shade(base[, format][, step][, count ])

- #### **base** \<Object> | \<String> | \<Array> Base color object (HSV/RGB), hex value as a string, or an array containing any combination of either.
- #### **format** \<String> Output format. Optional, **Default:** `hex`
- Supported types: `hex`, `rgb`, `hsv`
- #### **step** \<Number> | \<String> Step size. Optional, **Default:** `0.10`
- #### **count** \<Number> | \<String> Iteration count (base color included). Optional, **Default:** `5`

<br>

# Utilities

# Contributing

Thanks for checking out my package! Contribution guidelines will be coming soon.
11 changes: 6 additions & 5 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
'use strict'
"use strict";

module.exports = {
utils: require('./lib/utils'),
harmonies: require('./lib/harmonies'),
effects: require('./lib/effects')
}
utils: require("./lib/utils"),
harmonies: require("./lib/harmonies"),
effects: require("./lib/effects"),
SUPPORTED_SPACES: require("./lib/spaces"),
};

0 comments on commit 14edfdd

Please sign in to comment.