color-scheme1.0.1 • Public • Published
Generate pleasant color schemes (sets of colors).
Check out how it works.
Get the minified file (8kb).
Or for some reason, you could use the full file (18kb).
Table of Contents
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."
Gotta install it first:
npm install color-scheme
var ColorScheme = ;var scheme = ;scheme // Start the schemescheme'triade' // Use the 'triade' scheme, that is, colors// selected from 3 points equidistant around// the color wheel.; // Use the 'soft' color variationvar colors = scheme;/*colors = [ "e69373", "805240", "e6d5cf", "bf5830" ,"77d36a", "488040", "d2e6cf", "43bf30" ,"557aaa", "405c80", "cfd9e6", "306ebf" ]*/
In the browser
There are five color schemes.
The monochromatic scheme is based on selecting a single hue on the color wheel, then adding more colors by varying the source color's saturation and brightness.
Four colors will be produced.
Contrast supplements the selected hue with its complement (the color opposite it on the color wheel) as another source color.
8 colors will be produced.
Triade takes the selected hue and adds two more source colors that are both a certain distance from the initial hue.
The distance() method can be used to specify how far additional source colors will be from the initial hue.
12 colors will be produced.
Tetrade adds another yet source color, meaning four total sources.
16 colors will be produced.
Analogic produces colors that are "analogous", or next to each other on the color wheel.
Increasing the distance distance() will push the colors away from each other. "Values between 0.25 and 0.5 (15-30 degrees on the wheel) are optimal."
12 colors will be produced.
Additionally, the complement() method can be used to add complementary colors (i.e. those that are opposite the source colors on the color wheel). This will result in 16 colors. "It must be treated only as a complement - it adds tension to the palette, and it's too aggressive when overused. However, used in details and as accent of main colors, it can be very effective and elegant."
These variations will alter the produced colors. They basically work exactly like filters would in any image editing program.
The default variation. No change to the colors.
Produces pastel colors, which have in HSV high value and low-intermediate saturation.
Produces darker pastel colors.
Very light, almost washed-out colors.
Deeper, very saturated colors.
Colors with more gray; less saturated.
ColorScheme instances use method chaining to alter settings.
Set the scheme to [scheme_name]. The possible values are 'mono', 'contrast', 'triade', 'tetrade', and 'analogic'.
var s =// Set the scheme to analogicsscheme'analogic';
Note: Only works with the schemes 'triade', 'tetrade', and 'analogic'. (Because 'mono' only has one source color, and with 'contrast' the two source colors are always 180 degrees away from each other.)
This method sets the distance of the additional source colors from the initial hue. The value must be a float from 0 to 1.
var s = ;var colors = sscheme'triade';/*colors = [ "ff9900", "b36b00", "ffe6bf", "ffcc80","00b366", "007d48", "bfffe4", "80ffc9","400099", "2d006b", "dabfff", "b580ff" ]*/
Add complementary colors to the
analogic scheme. Does not work with any other scheme.
Returns the array of generated colors as hex values.
Note: Because this method returns the colors, it obviously cannot be chained afterwards.
var colors = s