avp / spectra

A Javascript color library. Quickly manipulate and convert colors.

Spectra

A small Javascript library for quickly manipulating and converting colors.

Example

Spectra can be wrapped around many different types of objects to create a Spectra color that can be manipulated.

var color = Spectra({r: 255, g: 25, b: 75});
color.red() // 255

Motivation

The project was created to have a highly functional and lightweight way to deal with colors using Javascript, without any dependencies.

Installation

Simply download spectra.min.js and include it before your source files.

Bower

The bower package is at spectrajs.

bower install spectrajs

Node

This module also works with Node. Simply run npm install spectra and use var Spectra = require('spectra') to set it up.

API Reference

Refer to http://avp.github.io/spectra for reference on how to use Spectra.

Tests

There are Jasmine tests included in the tests folder. Simply run grunt test from the root of the repository to run the tests. This also checks JSHint. Alternatively, run grunt to keep watch over source and test files, and automatically rerun the tests when the files change.

Coverage

Test coverage information can be generated by running grunt karma. Coverage information will be located in test/coverage after generation.

Building

To minify Spectra, run grunt build.

Contributing

View CONTRIBUTING.md for guidelines on how to contribute.

spectra's Issues

Light and dark

Find out if a color would be classified as light and/or dark.

For example, when using light colors, dark text looks good. So we need a function light() that returns true if the color is light and false otherwise.

From http://24ways.org/2010/calculating-color-contrast/:

function getContrastYIQ(){
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'dark' : 'light';
}

Blend modes

Perhaps an ability to use blending modes? Usage could be something like:

var color1 = Spectra(...);
var color2 = Spectra(...);
var blended = color1.blend(color2, mode);

Where mode is the name of the blend mode as a string.

Default color doesn't take into account transparency

var color = Spectra("rgba(255, 0, 0, 0.5)");

ctx.fillStyle = color;
console.log(Spectra(ctx.fillStyle).rgbaString()); // rgba(255,0,0,1)

I would expect the last statement to print "rgba(255,0,0,0.5)".

By far the easiest fix would be to let .toString() equal .rgbaString(). A slightly more sophisticated fix would be to let .toString equal the input type:

function l(c) {
    ctx.fillStyle = c;
    console.log(Spectra(ctx.fillStyle).rgbaString());
}

var c1 = Spectra("rgb(255, 0,  0)");
var c2 = Spectra("hsl(120, 100%, 50%)");
var c3 = Spectra("rgba(255, 0, 0, 0.5)");
l(c1); // "rgb(255, 0, 0)"
l(c2); // "hsl(120, 100%, 50%)");
l(c3); // "rgba(255, 0, 0, 0.5)");

Lab Colors

http://jsfiddle.net/tUJh3/

We should switch to using the Lab color space for some colors: http://en.wikipedia.org/wiki/Lab_color_space

• Wrapper for Lab colors
• Get Lab colors
• Color conversion using Lab

Outputs NaN hex string with some colors

It doesn't work correctly with some colors e.g.

Spectra("red").lighten(5).hex(); // "#ff1aaN"
// or
Spectra("#fff").lighten(10).hex(); // "#aNaNaN"
// black color in any form of input fails too

Same output in all latest browsers.

The luminance value is calculated incorrectly

According to the w3c on luminance, luminance gets calculated differently to Spectra's current implementation.

the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white
Note 1: For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255

Spectra interprets this block of text as

Spectra.fn.prototype.luma = function() {
  return (0.2126 * this.red()) + (0.7152 * this.green()) + (0.0722 * this.blue());
};

But doesn't take into account the if statements.

An example implementation, outside of spectra but supporting spectra objects is as follows:

function relativeLuminance(color) {
    // the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white
    // Note 1: For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
    //     if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
    //     if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
    //     if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
    // and RsRGB, GsRGB, and BsRGB are defined as:
    //     RsRGB = R8bit/255
    //     GsRGB = G8bit/255
    //     BsRGB = B8bit/255
    // https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

    // convert spectra object into {r, g, b} object
    if (color.color) color = color.color;

    var RsRGB = color.r / 255;
    var GsRGB = color.g / 255;
    var BsRGB = color.b / 255;

    var R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
    var G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
    var B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);

    var luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B;

    return luminance;
}

Support for CSS predefined colors

We need to add support for declaring new colors with something like Spectra('blue').

• white #ffffff
• silver #c0c0c0
• gray #808080
• black #000000
• red #ff0000
• maroon #800000
• yellow #ffff00
• olive #808000
• lime #00ff00
• green #008000
• aqua #00ffff
• teal #008080
• blue #0000ff
• navy #000080
• fuschia #ff00ff
• purple #800080
• orange #ffa500

Remove .sublime-project file

I accidentally left my spectra.sublime-project file in my commit.

Also add it to .gitignore

unintended global variable at line 186 of spectra.js

Random Color Range

var rainBlue = Spectra('blue');
randomColorRange(rainBlue, -10, 10);
// It could be up to 10% darker or lighter.

Color Contrast between two colors.

Another use case is finding colors with right contrast or checking if the contrast is right. Something like color1.contrast(color2).

http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_with_php

Add margin of error to .equals() method

The .equals() method should be able to take an optional argument for a percentage error, for example: color.equals(color2, 0.1) would check to see that color2 was within 10% of color.

Add leniency to parser

CSS Strings that aren't perfect should be acceptable.

rgb(12, 23 39
rgb(12, 34, 48 0.912 // should have alpha

And any other leniency things you can think about.

This should be able to be done by changing the regexes.

100% Code Coverage

We need to get to 100% code coverage to make sure that Spectra is robust.

Take a look at https://coveralls.io/r/avp/spectra if you need to see the current condition of the tests, and which lines need to be covered.

Also, if you run grunt karma there'll be test coverage information generated in test/coverage/. If you keep going down the directory tree, you'll find an HTML file that contains an analysis of the test coverage.

Color Harmonies

http://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm