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

coffee-colors

v1.0.1

Published

A simple color converter realized with CoffeeScript

Downloads

8

Readme

CoffeeColors

Coffee colors is a simple and light class that lets you manipulate colors,convert them between the most widely spread formats and even generate color palettes.

###Color

The Color constructor is at the core of this mini-library, being the only globally scoped variable to come out of it. To start things off, you can create a new color like so:

var color= new Color({r: 161, g: 234, b: 0});

This instantiates a new Color object, which, in addition to all it's methods, will also have r, g and b properties. To change the current color of the object, you can use the set method.

color.set('#45A5F5');

Note that we use a hex string, instead of an RBG object this time. The color detects the format of the passed item, and sets itself accordingly. Despite setting a hex value this time, you'll find that the object has simply changed it's r, g and b properties. Colors are always kept stored as RGB, for clarity's sake.

It's not advised to retrieve properties directly by calling them like so:

var red= color.r;

To get a color, call the to method. It takes two parameters, the second of which is optional. Firstly you need to pass it a format in which you expect your color. You can also specify if said data should be returned as an object, or as a formatted string, by passing a second boolean parameter. The only exception is 'hex', which cannot be an object and will also be returned as a string.

var rgb= color.to('rgb') // { r: 69, g: 165, b: 245 }
var hex= color.to('hex') // '#45A5F5'
var rgb= color.to('hsl', true) // 'hsl(0.58,0.9,0.62)'

Once a color is instantiated, you can check it's brightness:

color.brightness(); //=> 0.92

Get or set it's alpha:

color.alpha(); // => 1
color.alpha(0.6); // => 0.6
color.to('rgb', true); // => 'rgba(69, 165, 245, 0.6)'

Or get it's temperature. Temperature means whether the color is cold or warm.

color.temperature(); // => 'cold'

###Supported

The following formats and ways of declaring and requesting methods exist.

Format | Unformatted | Formatted --- | --- | --- RGB | { r:255, g:255, b:255 } | 'rgb(255, 255, 255)' hex | '#ffffff' | '#ffffff' HSL | { h:360, s:100, l:100 } | 'hsl(360, 100, 100)' HSV | { h:360, s:100, v:100 } | 'hsv(360, 100, 100)' CMYK| { c:1, m:1, y:1, k:1 } | 'cmyk(1, 1, 1, 1)'

###Static

The Color constructor has several static method, some of which are used to execute conversions. The choice to keep them static, and not members of Color instances was to save memory as most of the methods need a color to be passed to them anyway. In fact the to method of Color instances simply calls one of the conversion functions, and passes the this as the first argument.

The conversion methods are split into two types. Conversions from RGB to another format, and from another format to RGB. The only exception being formatRgb, which can be used to convert formatted values to unformatted ones and vice versa. The way to use these conversion methods is pretty straightforward.

var color= new Color('#4fa2cc');
Color.rgbToHsl(color, true); // => "hsl(200,55%,55%)"
Color.hexToRgb(color.to('hex')); // => {r: 79, g: 162, b: 204}

While it's not wrong to use the static method, especially when you don't want to create new Color objects, it's generally tidier to use instances and to.

###Color theory

There are a few methods that serve a more artistic purpose. What's unique about them, other than their intended use, is the fact that they're featured both as static methods on the Color constructor, as well as methods on Color instances. The currently available ones are:

angle(color, deg) - Adds a given amount of degrees to a color. Rotating it's hue on the color wheel. This method is actually used to implement all color theory methods, and heavily relies on the HSV color format.

analogous(color) - Returns the analogous or adjacent colors (30deg, -30deg) of a given color.

complementary(color) - Applies the angle method, using exactly 180 degrees. Meaning that the exact opposite hue on the color wheel is chosen.

triad(color) - Applies the angle method once with 120 degrees and again with -120, to get three equally spaced colors on the wheel.

splitComplementary(color) - Applies the angle method once with 150 and again with -150 degrees.

square(color) - Applies the angle method three times, forming a square with the initial color.

balanced(color, segments) - Splits the color wheel into equal segments, and returns an array of all the split point colors.

var color= new Color('#2251a8');
color.complementary(); // => {r: 168, g: 121, b: 34}
Color.complementary(color); // => {r: 168, g: 121, b: 34} as well