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

pigment

v0.1.0

Published

Color information, conversion and manipulation library

Downloads

795

Readme

Pigment

A color information, conversion and manipulation library with support for various color models!

Build Status Coverage Status Dependencies License

Installation

$ npm install pigment

Usage

To use pigment in your projects, you need to require the node module first.

var Color = require("pigment");

If you don't need all the functionality, you can use the basic package.

var Color = require("pigment/basic");

The basic package supports the name, rgb, hex and hsl color models.

It also includes the following methods for color manipulation,

  • luminance() - luminance value of the color
  • darkness() - darkness value of the color
  • negate() - negative color of the color
  • greyscale()/grayscale() - greyscale color from the color
  • mix(add, weight) - mix with another color, where add is a valid color of any supported models, weight (0-1, default: 0.5) is the amount to add
  • fadein(ratio) - increase alpha value by ratio (0-1)
  • fadeout(ratio) - decrease alpha value by ratio (0-1)
  • rotate(degrees) - rotate the hue by degrees (0-360)
  • saturate(ratio) - increase the saturation by ratio (0-1)
  • desaturate(ratio) - decrease the saturation by ratio (0-1)
  • lighten(ratio) - increase the luma by ratio (0-1)
  • darken(ratio) - decrease the luma by ratio (0-1)

The default package supports all the models supported by the basic package as well as the hsv, hwb, xyz, lab and cmyk color models;

You can use the full package if you want color schemes and color blindness support.

var Color = require("pigment/full");

To be able to perform any operations on a color, create a new color object. To convert to a specific color model, just prefix the model name by to.

var c = new Color("#f06860");

/* Get the color in hex, rgb, hsl etc. */
c.tohex(); // #f06860
c.torgb(); // rgb(240, 104, 96)
c.tohsla(); // hsla(3, 83%, 66%, 1)

/* Get luminance or darkness of the color */
c.luminance(); // 0.29270422282503833
c.darkness(); // 0.4362666666666666

/* Perform operations on the color */
c.fadeout(.2).mix("#e9f060", .5).fadein(.1).torgba(); // rgba(236, 186, 96, 0.99)

Apart from color conversion and manipulation, pigment is also able to parse a chunk of text to find out any colors.

var colors = Color.parse("Some roses aren't #ff0000, some violets aren't rgb(0, 0, 255), nobody's wrong, except maybe you!")

for (var i = 0, l = colors.length; i < l; i++) {
	console.log(colors[i].tohex()); // #ff0000, #0000ff
}

Generating a random color is also easy,

Color.random().tohex(); // #a68a4b

Core API

All the functionality in pigment is achieved with models. The addModel method can be used to add a new color model to pigment.

Color.addModel(name, model);

The model object must consist 3 properties,

  1. match - A function or a regex which is used to detect if the color is represented in the specific model representation.
  2. format - A function which formats the color string into model's representation.
  3. convert - A function which converts the color object into model's representation.
  4. frommodel - A function which converts the model's representation into an object with red, green and blue properties, and an optional alpha property.
  5. tomodel - A function which converts the color to the model representation.

There is also an optional init method which is called when instantiating a color object.

Any dependencies on other color models can be specified with a depends property with the model names in an array.

Have a look at the models directory in the repository for examples.