Paints

A flexible lightweight Javascript dynamic color theme provider, designed with canvas in mind. Pick from a large number of color themes, generate as many colours as you need, then start using them in your project. Check out our examples for some ideas.

Check out a quick demo.

===

Installation

Browser

If you want to use palette in your browser, then simply grab the production or development scripts, embed them in your project and you are ready to use paints.

var icey = paints('ice', 20);

Node

Fire up npm and run npm install paints then require it and get started.

var paints = require('paints');
var icey = paints('ice', 30);

Getting started

Paints is a breeze to use

paints('reds', 10);

This call would return an array of 10 hex colors from the reds theme. Check out themes for a complete list of themes.

Themes

• reds
• greens
• blues
• greyscale
• ice
• fire
• earth
• pastel
• zurg
• monaLisa
• sea
• pond
• stars
• night
• dream
• avocado
• morgul
• rainbow
• mirkwood
• rand2
• rand3

Contributing

If you want to add a color scheme, clone this repo add your theme to src/themes.js, credit yourself with a comment. Run node build.js to update the README.md then send a pull request.

How to develop a theme

Open a look in themes.js
The basic template for a theme is as follows.

    'my-theme': function(x) {
        var r = 100;
        var g = x * 100;
        var b = 255;
        
        return [r, g, b];
    }

Your theme function must return an RGB color in the form of an array of length 3 for some value of x where 0 < x < 1. If you want to use HSL instead of RGB, pass your RGB values to the hslToRgb method like so:

    'my-theme': function(x) {
        var h = 100;
        var s = x * 100;
        var l = 255;
        
        return hslToRgb(r, g, b);
    }