Color Hash
Generate color based on the given string.
Demo
https://zenozeng.github.io/color-hash/demo/
Usage
Browser
bower install color-hash
A UMD version of ColorHash is located in dist/
.
Note that Array.prototype.map
is used in color-hash
,
a polyfill must be provided if you want to use it in IE8.
Basic
var colorHash = ; // in HSL, Hue ∈ [0, 360), Saturation ∈ [0, 1], Lightness ∈ [0, 1]colorHash; // [ 225, 0.65, 0.35 ] // in RGB, R, G, B ∈ [0, 255]colorHash; // [ 135, 150, 197 ] // in HEXcolorHash; // '#8796c5'
Custom Hash Function
var { var hash = 0; forvar i = 0; i < strlength; i++ hash += str; return hash;};var colorHash = hash: customHash;colorHash;colorHash;colorHash;
Custom Hue
var colorHash = hue: 90;
var colorHash = hue: min: 90 max: 270;
var colorHash = hue: min: 30 max: 90 min: 180 max: 210 min: 270 max: 285 ;
Custom Lightness
var colorHash = lightness: 05;
var colorHash = lightness: 035 05 065;
Custom Saturation
var colorHash = saturation: 05;
var colorHash = saturation: 035 05 065;
Node.js
npm install color-hash --save
var ColorHash = ;
License
MIT.
FAQ
How does it work?
It uses the hash
function (default is BKDRHash) to calculate the hash of the given string.
Hue = hash % 359. (Note that 359 is a prime)
Saturation = SaturationArray[hash / 360 % SaturationArray.length]
Lightness = LightnessArray[hash / 360 / Saturation.length % LightnessArray.length]
By default,
SaturationArray = LightnessArray = [0.35, 0.5, 0.65]
Why not LAB?
Though LAB is more perceptually uniform, HSL is easier to control. Simply sets lightness and saturation and change hue uniformly can generate uniform colors.
Dev
Test
npm installnpm test
Coverage Report
https://zenozeng.github.io/color-hash/coverage/lcov-report/lib/index.html
Build browser js
npm installnpm run build