JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 263
  • Score
    100M100P100Q85815F
  • License ISC

A sorter for hexadecimal color arrays - by brightness, saturization, brightest dull color + hex color mixer.

Package Exports

  • hexsorter

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hexsorter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hexSorter v1.0.0

Original:

alt text

Sorted:

alt text

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

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

  • Sort colors by luminosity
  • Get brightest color from array
  • Get most saturated color from array
  • Get dullest bright color from array
  • Mix hexadecimal color values to create/diffuse colors

Usage

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

log("bright", hexSorter.mostBrightColor(colorArray));
log("saturated", hexSorter.mostSaturatedColor(colorArray));
log("bright dull", hexSorter.brightestDullColor(colorArray));
log("mix", hexSorter.colorMixer('#000000', '#FF0000', 65));

Examples

Node.js console example

sortcolors.js - NodeJS example, showing how sorting works

node sortcolors

alt text

Web example

Hex Sorter - Stack Blitz 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

alt text

Shoutouts

The wonderful str_pad remake javascript str_pad