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

materializer

v0.1.1

Published

Convert colors to Material Design palette

Downloads

3

Readme

materializer

npm version

Convert colors to Material Design palette

Installation

Install materializer globally via npm:

npm install -g materializer

This will make the materializer command globally available.

Usage

Convert a color to its closest Material Design palette equivalent:

materializer ffcc00
# Outputs: #ffca28

Note that if specifying a hex color with the leading # character, the # must be escaped:

materializer \#ffcc00
# Outputs: #ffca28

By default, materializer will attempt to return the output color in the same format as the input color. You can optionally specify different output formats using the --format option:

materializer ffcc00 --format=hex
# Outputs: #ffca28

materializer ffcc00 --format=rgb
# Outputs: rgb(255,202,40)

materializer ffcc00 --format=hsl
# Outputs: hsl(45,100,58)

materializer ffcc00 --format=name
# Outputs: Amber 400

You can also specify the format using the -f shorthand option:

materializer ffcc00 -f rgb
# Outputs: rgb(255,202,40)

Multiple colors can be converted by specifying multiple input arguments:

materializer ffcc00 00ccff ff00cc --format=name
# Outputs:
#  Amber 400
#  Light Blue 300
#  Purple A200

Command line help is available by passing the --help option:

materializer --help

API usage

To use materializer programmatically within an npm project, install it locally:

npm install materializer

You can then convert colors from within your project using the materializer API:

var materializer = require('materializer');

var convertedColor = materializer('#ffcc00');

console.log(convertedColor);
/*
Output:
{
	name: 'Amber 400',
	r: 255,
	g: 202,
	b: 40,
	h: 45,
	s: 100,
	l: 58,
	hex: '#ffca28',
	rgb: 'rgb(255,202,40)',
	hsl: 'hsl(45,100,58)'
}
*/

console.log(convertedColor.hex); // Output: #ffca28

The materializer accepts all valid CSS color strings, and returns an object containing multiple color formats as shown above.