npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tafalk/material-color-generator

v1.0.12

Published

A zero-runtime-dependency package for generating material colors out of strings

Downloads

51

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

tafalktafalk

Keywords

material-designcolor

Readme

tafalk/material-color-generator

GitHub license build npm bundle size npm

Idempotently matches given string to a material color.

Light and dark classification is applied regarding the color chart here: If the text color is black for a background, it is considered as a light one; and if white, it is dark.

Install

npm install @tafalk/material-color-generator

And use it in your code like:

import { GetColor } from '@tafalk/material-color-generator'
const color = GetColor('my string', 'dark'); // -> something like 'ffffff'

Possibilities

GetColor function matches one of the colors below and returns the RGB code. | Light | Dark | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------- | | #ffebee ffebee | #ef5350 ef5350 | | #ffcdd2 ffcdd2 | #f44336 f44336 | | #ef9a9a ef9a9a | #e53935 e53935 | | #e57373 e57373 | #d32f2f d32f2f | | #fce4ec fce4ec | #c62828 c62828 | | #f8bbd0 f8bbd0 | #b71c1c b71c1c | | #f48fb1 f48fb1 | #f06292 f06292 | | #f3e5f5 f3e5f5 | #ec407a ec407a | | #e1bee7 e1bee7 | #e91e63 e91e63 | | #ce93d8 ce93d8 | #d81b60 d81b60 | | #ede7f6 ede7f6 | #c2185b c2185b | | #d1c4e9 d1c4e9 | #ad1457 ad1457 | | #b39ddb b39ddb | #880e4f 880e4f | | #e8eaf6 e8eaf6 | #ba68c8 ba68c8 | | #c5cae9 c5cae9 | #9c27b0 9c27b0 | | #9fa8da 9fa8da | #8e24aa 8e24aa | | #e3f2fd e3f2fd | #7b1fa2 7b1fa2 | | #bbdefb bbdefb | #6a1b9a 6a1b9a | | #90caf9 90caf9 | #4a148c 4a148c | | #64b5f6 64b5f6 | #9575cd 9575cd | | #42a5f5 42a5f5 | #7e57c2 7e57c2 | | #e1f5fe e1f5fe | #673ab7 673ab7 | | #b3e5fc b3e5fc | #5e35b1 5e35b1 | | #81d4fa 81d4fa | #512da8 512da8 | | #4fc3f7 4fc3f7 | #4527a0 4527a0 | | #29b6f6 29b6f6 | #311b92 311b92 | | #03a9f4 03a9f4 | #7986cb 7986cb | | #e0f7fa e0f7fa | #5c6bc0 5c6bc0 | | #b2ebf2 b2ebf2 | #3f51b5 3f51b5 | | #80deea 80deea | #3949ab 3949ab | | #4dd0e1 4dd0e1 | #303f9f 303f9f | | #26c6da 26c6da | #283593 283593 | | #00bcd4 00bcd4 | #1a237e 1a237e | | #00acc1 00acc1 | #2196f3 2196f3 | | #e0f2f1 e0f2f1 | #1e88e5 1e88e5 | | #b2dfdb b2dfdb | #1976d2 1976d2 | | #80cbc4 80cbc4 | #1565c0 1565c0 | | #4db6ac 4db6ac | #0d47a1 0d47a1 | | #e8f5e9 e8f5e9 | #039be5 039be5 | | #c8e6c9 c8e6c9 | #0288d1 0288d1 | | #a5d6a7 a5d6a7 | #0277bd 0277bd | | #81c784 81c784 | #01579b 01579b | | #66bb6a 66bb6a | #0097a7 0097a7 | | #4caf50 4caf50 | #00838f 00838f | | #f1f8e9 f1f8e9 | #006064 006064 | | #dcedc8 dcedc8 | #26a69a 26a69a | | #c5e1a5 c5e1a5 | #009688 009688 | | #aed581 aed581 | #00897b 00897b | | #9ccc65 9ccc65 | #00796b 00796b | | #8bc34a 8bc34a | #00695c 00695c | | #7cb342 7cb342 | #004d40 004d40 | | #f9fbe7 f9fbe7 | #43a047 43a047 | | #f0f4c3 f0f4c3 | #388e3c 388e3c | | #e6ee9c e6ee9c | #2e7d32 2e7d32 | | #dce775 dce775 | #1b5e20 1b5e20 | | #d4e157 d4e157 | #689f38 689f38 | | #cddc39 cddc39 | #558b2f 558b2f | | #c0ca33 c0ca33 | #33691e 33691e | | #afb42b afb42b | #827717 827717 | | #9e9d24 9e9d24 | #ef6c00 ef6c00 | | #fffde7 fffde7 | #e65100 e65100 | | #fff9c4 fff9c4 | #ff5722 ff5722 | | #fff59d fff59d | #f4511e f4511e | | #fff176 fff176 | #e64a19 e64a19 | | #ffee58 ffee58 | #d84315 d84315 | | #ffeb3b ffeb3b | #bf360c bf360c | | #fdd835 fdd835 | #a1887f a1887f | | #fbc02d fbc02d | #8d6e63 8d6e63 | | #f9a825 f9a825 | #795548 795548 | | #f57f17 f57f17 | #6d4c41 6d4c41 | | #fff8e1 fff8e1 | #5d4037 5d4037 | | #ffecb3 ffecb3 | #4e342e 4e342e | | #ffe082 ffe082 | #3e2723 3e2723 | | #ffd54f ffd54f | #757575 757575 | | #ffca28 ffca28 | #616161 616161 | | #ffc107 ffc107 | #424242 424242 | | #ffb300 ffb300 | #212121 212121 | | #ffa000 ffa000 | #78909c 78909c | | #ff8f00 ff8f00 | #607d8b 607d8b | | #ff6f00 ff6f00 | #546e7a 546e7a | | #fff3e0 fff3e0 | #455a64 455a64 | | #ffe0b2 ffe0b2 | #37474f 37474f | | #ffcc80 ffcc80 | #263238 263238 | | #ffb74d ffb74d | | | #ffa726 ffa726 | | | #ff9800 ff9800 | | | #fb8c00 fb8c00 | | | #f57c00 f57c00 | | | #fbe9e7 fbe9e7 | | | #ffccbc ffccbc | | | #ffab91 ffab91 | | | #ff8a65 ff8a65 | | | #ff7043 ff7043 | | | #efebe9 efebe9 | | | #d7ccc8 d7ccc8 | | | #bcaaa4 bcaaa4 | | | #fafafa fafafa | | | #f5f5f5 f5f5f5 | | | #eeeeee eeeeee | | | #e0e0e0 e0e0e0 | | | #bdbdbd bdbdbd | | | #9e9e9e 9e9e9e | | | #eceff1 eceff1 | | | #cfd8dc cfd8dc | | | #b0bec5 b0bec5 | | | #90a4ae 90a4ae | |

More possibilities