dagthomas / hexsorternext

hexSorter for the next generation

hexSorterNext v1.0.0

Original:

Sorted:

Installation

// Load the module.
import * as hexSorterNext from './hexSorterNext';

Why hexSorter?

hexSorterNext is a typescript implementation of hexsorter.js.

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
• Mix hexadecimal color values to create/diffuse colors
• Choose conversion type for RGB->Y. BT.601, BT709, BT2020

Usage

import { colorMixer, sortColors, mixSortColors } from './hexSorterNext';
const log = console.log;
var colorArray = ["#516373", "#f2b999", "#f2e8c9", "#6c838c", "#f2f2f2"];

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

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

Example of CSS file used on SVG in HTML