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

cyberalien-color

v1.0.0

Published

Color library

Downloads

1,513

Readme

Why create yet another color library?

I needed library that:

  • Had similar code on server side (PHP) and client side (browser).
  • Had license compatible with commercial projects.

There was no library that matched these requirements.

This library is available in 2 languages to make it usable in both client side web components and server side scripts:

  • PHP
  • JavaScript, usable in Node.js and in browser. Browser version has no dependencies.

Features

Library has only 1 object: Color

Color object represents color. You can:

  • Set or get color and color components in RGB and HSL color spaces with optional alpha channel.
  • Import/export color from/to different commonly used string formats: hexadecimal, IE hex, rgb(), hsl(), color keywords.
  • Mix colors.
  • Get luminance and calculate color contrast.

Class automatically converts between color spaces when needed.

Code is optimized for performance. Unusual coding style was used to make code consistent between different programming languages.

Usage

How to include library:

// For Node.js
const CAColor = require('cyberalien-color');
    
// For browser (change path to correct url)
// <script src="./dist/color-es5.js"></script>

Sample code:

var color, color2;
    
// Create simple color object, get HEX string
color = new CAColor();
color.setRGB(10, 20, 30);
color.toHex();
    
// Create color object from string
color = CAColor.fromString('rgba(10, 20, 30, .5)');
color.getRGBA();
    
// Change color components in different color spaces
color = CAColor.fromString('#f00');
color.setHue(180);
color.toString(); // '#00ffff'
color.toHex(true); // '#0ff' - compressed hex string
 
// Mix colors
color = CAColor.fromString('blue');
color2 = CAColor.fromString('red');
color.mix(color2, 50); // 50% of each color
color.toKeyword(); // 'purple'
    
// Manipulate color spaces
color = CAColor.fromString('yellow');
color.setHue(color.getHue() + 180);
color.setLightness(25);
color.toHex(); // '#000080'
color.toHSLString(); // 'hsl(240, 100%, 25%)'

// Calculate contrast between 2 colors
color = CAColor.fromString('yellow');
color2 = CAColor.fromString('darkblue');
color.getContrast(color2); // 14.245...

Documentation

Documentation will be added later, when new website is ready.

For now you can easily figure it out by reading function names and docblocks in src/color.js or lib/color.php. Code is well documented.

Color values use following ranges:

  • red, green, blue: 0-255
  • hue: 0-360
  • lightness, saturation: 0-100
  • alpha: 0-1

Requirements

JavaScript library is written in ES6, but is compiled into ES5 code for older browsers.

PHP library requires PHP 5.4 or newer version.

Compiling library

To re-compile library you need Node.js. Open Terminal or command prompt, run these commands:

npm install
grunt

First command will install all necessary libraries. Second command will compile libraries.

If you are having problems getting Grunt to execute, install it globally:

npm install -g grunt

Unit tests

To run tests run this command:

npm test

License

This library is licensed under MIT license. That means you can use it in both open source and commercial projects.