Gradient2 NPM | npm.io

Gradient2

A JavaScript library for creating color gradients using the color library. The project started as an update to Gradient.js but soon became almost completely rewritten.

npm GitHub Workflow Status

Getting Started

Gradient2 can be used both client-side and server-side to generate gradients of colour. Follow the instructions below to get started.

Installation

Gradient2 can be installed from npm.

$ npm install gradient2

Usage

To use the package, simply require it in your code.

let Gradient = require('gradient2')

Then use the new keyword to create an instance of Gradient with a config object.

let gradient = new Gradient(config)

With the gradient created, return an array of Color objects.

gradient.toArray()

This array can then be used and manipulated however needed.

Config

The config object is required in order to generate the gradients.

let gradient = new Gradient({
  colors: ['#f00', '#00f'],
  steps: 3,
  model: 'rgb'
})

Property	Type	Default	Required	Description	Accepted Values
`colors`	Array	`null`	`true`	Array of colors to be used in the gradient.	An array of color-strings An array of objects specifying the color-string and position of the stop `js { color: '#f00', pos: 50 }`
`steps`	Number	`null`	`true`	The number of steps to be taken in the gradient	Positive integer
`model`	String	`rgb`	`false`	The color model to use when interpolating between colors	`rgb` or `hsl`

Methods

Invoke the toArray() method on your gradient instance to return an array of color objects. Pass a string as an argument to denote how the color is returned. Any property of a color object can be passed in, e.g. hex, rgb, hsl, ansi16 etc.

Example

let Gradient = require('gradient2')

let gradient = new Gradient({
  colors: [
    { color: '#f00', pos: 0},
    { color: '#0f0', pos: 25},
    { color: '#00f', pos: 100}
  ],
  steps: 20,
  model: 'hsl'
})

let colors = gradient.toArray('hex')

for (let color of colors) {
  let div = document.createElement("div")
  div.style.width = "100px"
  div.style.height = "20px"
  div.style.background = color

  document.body.appendChild(div)
}

alt text