color-hash
color-hash copied to clipboard
Deterministically generate color based on a given string.
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