hexSorter v1.5.0

Original:

Sorted:

Installation

In a browser:

<script src="hexSorter.js"></script>

Using npm:

$ npm i --save hexsorter

In Node.js:

// Load the module.
const hexSorter = require('hexSorter');

Why hexSorter?

hexSorter was based on an old Adobe Kuler plugin in php. Rewritten to work with<br> new technology.<br>

Its usage is to automagically sort colors by luminosity, to generate style<br> sheets or vector fill/strokes.<br>

• Sort colors by luminosity
• Get brightest color from array
• Get most saturated color from array
• Mix hexadecimal color values to create/diffuse colors
• Choose conversion type for RGB->Y. BT.601, BT709, BT2020 <br>

Usage

node test

const hexSorter = require('./hexSorter');
const log = console.log;
var colorArray = ["#516373", "#f2b999", "#f2e8c9", "#6c838c", "#f2f2f2"];

var mixColor = hexSorter.colorMixer(colorArray[0], "#fff", 50);
var mostBright = hexSorter.sortColors(colorArray, 'mostBrightColor');
var mostSaturatedColor = hexSorter.sortColors(colorArray, 'mostSaturatedColor');
var colorMixed = hexSorter.colorMixer("#516373", "#fff", 50);
var mixSort = hexSorter.mixSortColors(colorArray, 'mostBrightColor', "#fff", 50);

console.log("Mixed with 50% white: ", mixColor);
console.log("Sorted by brightness: ", mostBright);
console.log("Sorted by saturation: ", mostSaturatedColor);
console.log("Mix #fff sorted: ", mixSort);
console.log("Mix #516373 with #fff - 50%: ", colorMixed);

Examples

Can be found in the /examples/ folder, be sure to run:

npm install

in the examples folder before testing examples.

Node.js console example

sortcolors.js - NodeJS example, showing how sorting works

node sortcolors

Web example

Hex Sorter - Stack Blitz Pure JS example

Hex Sorter - Stack Blitz Vue example

Adobe Kuler Top 100 palettes, 2017 (nvrfrgt)

convtocss.js - NodeJS example, reading from file, outputting to css.

node convtocss

Outputs 'output/dagthomas.css' based on color arrays in 'input/colors.txt' (from an earlier php Kuler project, nvrfrgt).

Color Input

CSS Output

Example of CSS file used on SVG in HTML