Package Exports

tinygradient

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tinygradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TinyGradient

JavaScript color generator

Easily generate color gradients with unlimited number of color stops and steps.

Built on top of TinyColor.

Compatible with Require.js/AMD and NodeJS.

Usage

The gradient can be generate using RGB interpolation or HSV interpolation. HSV usually produces brighter colors.

Initialize gradient

The tinygradient constructor takes a list or an array of colors steps and a number of steps.

The generated gradients might have one more step in certain conditions.

// using varargs
var gradient = tinygradient('red', 'green', 'blue', 12);

// using array
var gradient = tinygradient([
  '#ff0000',
  '#00ff00',
  '#0000ff'
], 12);

The colors are parsed with TinyColor, multiple formats are accepted.

var gradient = tinygradient([
  tinycolor('#ff0000'),       // tinycolor object
  {r: 0, g: 255, b: 0},       // RGB object
  {h: 240: s: 1, v: 1, a: 1}, // HSVa object
  'rgb(120, 120, 0)',         // RGB CSS string
  'gold'                      // named color
], 20);

Generate gradient

// RGB interpolation
var colorsRgb = gradient.rgb();

rgb

// HSV clockwise interpolation
var colorsHsv = gradient.hsv();

hsv

// HSV counter-clockwise interpolation
var colorsHsv = gradient.hsv(true);

hsv2

There are also two methods which will automatically choose between and clockwise and counter-clockwise.

// HSV interpolation using shortest arc between colors
var colorsHsv = gradient.hsv('short');

// HSV interpolation using longest arc between colors
var colorsHsv = gradient.hsv('long');

Each function returns an array of TinyColor objects, see available methods.

Get CSS gradient string

The css method will output a valid W3C string (without vendors prefix) to use with background-image css property.

// linear gradient to right (default)
var gradientStr = gradient.css();

// radial gradient ellipse at top left
var gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');

Reversing gradient

Returns a new instance of TinyGradient with reversed colors.

var reversedGradient = gradient.reverse();

Tests

A Mocha test suite is available.

npm install
npm test