Package Exports
- color-hash
- color-hash/dist/color-hash.js
- color-hash/dist/esm.js
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 (color-hash) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Color Hash
Generate color based on the given string.
Demo
https://zenozeng.github.io/color-hash/demo/
Usage
Deno
import ColorHash from "https://deno.land/x/color_hash@v2.0.0/mod.ts"Node.js
npm install color-hashimport ColorHash from 'color-hash'or
const ColorHash = require('color-hash').default;<script type="module">
import ColorHash from '../dist/esm.js';
</script>Basic
var 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
var customHash = function(str) {
var hash = 0;
for(var i = 0; i < str.length; i++) {
hash += str.charCodeAt(i);
}
return hash;
};
var colorHash = new ColorHash({hash: customHash});
colorHash.hsl('Hello World!');
colorHash.rgb('Hello World!');
colorHash.hex('Hello World!');Custom Hue
var colorHash = new ColorHash({hue: 90});var colorHash = new ColorHash({hue: {min: 90, max: 270}});var colorHash = new ColorHash({hue: [ {min: 30, max: 90}, {min: 180, max: 210}, {min: 270, max: 285} ]});Custom Lightness
var colorHash = new ColorHash({lightness: 0.5});var colorHash = new ColorHash({lightness: [0.35, 0.5, 0.65]});Custom Saturation
var colorHash = new ColorHash({saturation: 0.5});var colorHash = new ColorHash({saturation: [0.35, 0.5, 0.65]});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 / SaturationArray.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
deno testCoverage Report
https://zenozeng.github.io/color-hash/coverage/lcov-report/lib/index.html