material-color-hash

Hash a string to a Material Design color

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.

        
          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('😎');
          // emojiStyle: {
          //   backgroundColor: '#FFEB3B',
          //   color: 'rgba(0, 0, 0, 0.87)',
          //   materialColorName: 'Yellow'
          // }
        
      
foo
bar
baz

The return object can be fed directly as a style prop to React components:

        
          import toMaterialStyle from 'material-color-hash';

          const MaterialBadge = (props) => {
            const style = toMaterialStyle(props.text);

            return (
              <div
                className="badge"
                style={style}
              >
                {props.text}
              </div>
            );
          }
        
      

For more information about Material Design colors and how to use them, check out the official Material Design site by Google

Proudly brought to you by Belka