npmpackage.info

Gathering detailed insights and metrics for material-color-hash

Other packages similar to material-color-hash

hash-color-material

1.1.3

Hashes a string or a number to a material color hex code.

@osjwnpm/odit-ipsum-fugit

1.0.0

[![Version](https://img.shields.io/npm/v/material-components-web.svg)](https://www.npmjs.com/package/material-components-web) [![Chat](https://img.shields.io/discord/259087343246508035.svg)](https://discord.gg/material-components)

Gathering detailed insights and metrics for material-color-hash

material-color-hash - 0.1.6 | npmpackage.info

material-color-hash

Hash strings to Material UI colors

0.1.6

MIT

JavaScript

12.43 kB

1.7

Installations

npm install material-color-hash

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

9.0.0

NPM Version

5.5.1 Score

80.7

Supply Chain

Quality

77.5

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

2

Closed

0

Merged

2

Issues

Open

1

Total

5

Closed

4

Releases

Unable to fetch releases

Languages

JavaScript

HTML

CSS

JavaScript (98.97%)

HTML (0.8%)

CSS (0.23%)

Developer

BelkaLab

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

73 Stars

34 Commits

3 Forks

6 Watchers

2 Branches

5 Contributors

Updated on May 03, 2024

Maintainers

View All 5 Contributors

Package Meta Information

Latest Version

0.1.6

Package Id

material-color-hash@0.1.6

Unpacked Size

12.43 kB

Size

5.02 kB

File Count

NPM Version

5.5.1

Node Version

9.0.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

string-hash

Dev Dependencies

babel-cli babel-eslint babel-preset-es2015 eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

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

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/

Usage

1$ npm install material-color-hash

1var toMaterialStyle = require('material-color-hash');
2// or, if you are on ES6:
3// import toMaterialStyle from 'material-color-hash'
4
5/* basic usage */
6var fooStyle = toMaterialStyle('foo');
7// fooStyle: {
8//   backgroundColor: '#00BCD4',
9//   color: 'rgba(0, 0, 0, 0.87)',
10//   materialColorName: 'Cyan'
11// }
12
13/* select a different shade (default is 500) */
14var fooStyle200 = toMaterialStyle('foo', '200');
15// fooStyle200: {
16//   backgroundColor: '#80DEEA',
17//   color: 'rgba(0, 0, 0, 0.87)',
18//   materialColorName: 'Cyan'
19// }
20
21var barStyle = toMaterialStyle('bar', 500);
22// barStyle: {
23//   backgroundColor: '#2196F3',
24//   color: 'rgba(255, 255, 255, 1)',
25//   materialColorName: 'Blue'
26// }
27
28/* also works with emoji! */
29var emojiStyle = toMaterialStyle('😎');
30// emojiStyle: {
31//   backgroundColor: '#FFEB3B',
32//   color: 'rgba(0, 0, 0, 0.87)',
33//   materialColorName: 'Yellow'
34// }

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

1import toMaterialStyle from 'material-color-hash';
2
3const MaterialBadge = (props) => {
4	const style = toMaterialStyle(props.text);
5
6	return (
7		<div
8			className="badge"
9			style={style}
10		>
11			{props.text}
12		</div>
13	);
14}

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

Contributors

Giovanni Frigo, Developer @Belka

License

About Belka

Belka is a Digital Agency specialized in design, mobile applications development and custom solutions. We love open source software! You can see our projects or look at our case studies.

Interested? Hire us to help build your next amazing project.

www.belka.us

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

51 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-4hpf-3wq7-5rpr
Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3

Score

1.7

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More