Color Hash

Deterministically generate color based on a given string.

Based on zenozeng/color-hash; forked to restructure and future-proof.

Demo

https://hugojosefson.github.io/color-hash/demo/

Install

yarn add @hugojosefson/color-hash

 # or

npm install --save @hugojosefson/color-hash

Usage

const ColorHash = require('@hugojosefson/color-hash');
const colorHash = new ColorHash();

// in HSL, Hue ∈ [0, 360), Saturation ∈ [0, 1], Lightness ∈ [0, 1]
colorHash.hsl('Hello World'); // [ 225, 0.65, 0.35 ]

// in RGB, R, G, B ∈ [0, 255]
colorHash.rgb('Hello World'); // [ 135, 150, 197 ]

// in HEX
colorHash.hex('Hello World'); // '#8796c5'

Custom Hash Function

const ColorHash = require('@hugojosefson/color-hash');

const customHash = function(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        hash += str.charCodeAt(i);
    }
    return hash;
};

const colorHash = new ColorHash({hash: customHash});
colorHash.hsl('Hello World!');
colorHash.rgb('Hello World!');
colorHash.hex('Hello World!');

Custom Hue

const colorHash = new ColorHash({hue: 90});

const colorHash = new ColorHash({hue: {min: 90, max: 270}});

const colorHash = new ColorHash({hue: [ {min: 30, max: 90}, {min: 180, max: 210}, {min: 270, max: 285} ]});

Custom Lightness

const colorHash = new ColorHash({lightness: 0.5});

const colorHash = new ColorHash({lightness: [0.35, 0.5, 0.65]});

Custom Saturation

const colorHash = new ColorHash({saturation: 0.5});

const colorHash = new ColorHash({saturation: [0.35, 0.5, 0.65]});

Dev

Test

yarn
yarn test

Coverage Report

https://hugojosefson.github.io/color-hash/coverage/lcov-report/src/

Build standalone dist/color-hash.js

yarn
yarn build:dist

Build coverage report and demo

yarn
yarn build:gh-pages