Hash a string to a Material Design color

Hash a string to a Material Design color

Material color hashing Hash strings to Material UI colors A dead-simple library to hash a string to a {backgroundColor, textColor} tuple from the official Material Design palette. Great for dynamically coloring your UI elements (badges, list icons, ..) wi

Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant. (https://material.google.com/style/color.html)

Material color hashing

Hash a string to a Material Design color

npm version Alt text

A dead-simple library to hash a string to a {backgroundColor, textColor} tuple from the official Material Design palette.

Great for dynamically coloring your UI elements (badges, list icons, ..) with good-looking, vibrant colors and ensured text legibility.

Interactive Demo

http://belkalab.github.io/material-color-hash/ http://belkalab.github.io/material-color-hash/

Usage

$ npm install material-color-hash
var toMaterialStyle = require('material-color-hash');
// or, if you are on ES6:
// import toMaterialStyle from 'material-color-hash'

/* basic usage */
var fooStyle = toMaterialStyle('foo');
// fooStyle: {
//   backgroundColor: '#00BCD4',
//   color: 'rgba(0, 0, 0, 0.87)',
//   materialColorName: 'Cyan'
// }

/* select a different shade (default is 500) */
var fooStyle200 = toMaterialStyle('foo', '200');
// fooStyle200: {
//   backgroundColor: '#80DEEA',
//   color: 'rgba(0, 0, 0, 0.87)',
//   materialColorName: 'Cyan'
// }

var barStyle = toMaterialStyle('bar', 500);
// barStyle: {
//   backgroundColor: '#2196F3',
//   color: 'rgba(255, 255, 255, 1)',
//   materialColorName: 'Blue'
// }

/* also works with emoji! */
var emojiStyle = toMaterialStyle('

Github Repository