color-scheme.js

Generate pleasant color schemes (sets of colors).

This library is based on the perl module Color::Scheme, which is in turn based on the Color Scheme Designer website.

Check out how it works.

Get the minified file (8kb).

Or for some reason, you could use the full file (18kb).

Table of Contents

- Description
- Usage
- Schemes
- mono
- contrast
- triade
- tetrade
- analogic
- Variations
- pastel
- soft
- light
- hard
- pale
- Methods

Description

This module is a JavaScript implementation of the Perl implementation of Color Schemes
2 (http://wellstyled.com/tools/colorscheme2), a color scheme generator.
Start by visitng the Color Schemes 2 web site and playing with the colors.
When you want to generate those schemes on the fly, begin using this modoule.
The descriptions herein don't make too much sense without actually seeing the
colorful results.

Henceforth, paragraphs in quotes denote documentation copied from Color Schemes 2.

*"Important note: This tool doesn't use the standard HSV or HSB model (the
same HSV/HSB values ie. in Photoshop describe different colors!). The color
wheel used here differs from the RGB spectre used on computer screens, it's
more in accordance with the classical color theory. This is also why some
colors (especially shades of blue) make less bright shades than the basic
colors of the RGB-model. In plus, the RGB-model uses red-green-blue as primary
colors, but the red-yellow-blue combination is used here. This deformation also
causes incompatibility in color conversions from RGB-values. Therefore, the RGB
input (eg. the HTML hex values like #F854A9) is not exact, the conversion is
rough and sometimes may produce slightly different color."*

Usage

$3

Gotta install it first:

``
npm install color-scheme
`

`javascript
var ColorScheme = require('color-scheme');

var scheme = new ColorScheme;
scheme.from_hue(21) // Start the scheme
.scheme('triade') // Use the 'triade' scheme, that is, colors
// selected from 3 points equidistant around
// the color wheel.
.variation('soft'); // Use the 'soft' color variation

var colors = scheme.colors();

/*
colors = [ "e69373", "805240", "e6d5cf", "bf5830" ,
"77d36a", "488040", "d2e6cf", "43bf30" ,
"557aaa", "405c80", "cfd9e6", "306ebf" ]
*/
`

$3

`html