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.

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)
}

License

This project is licensed under the MIT License.

Acknowledgments

• tstone for original Gradient library
• Qiz- for color libraray