Package Exports

javascript-color-gradient
javascript-color-gradient/src
javascript-color-gradient/src/index.js

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 (javascript-color-gradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

JavaScript Color Gradient

Lightweight JavaScript library, used to generate an array of color gradients by providing start and finish colors, as well as the required number of midpoints.

MIT License Version Size

Installation

For Node.js: Install the javascript-color-gradient npm module:

npm install javascript-color-gradient

Then import the module into your JavaScript:

import colorGradient from "javascript-color-gradient";

Demo

A demo is worth a thousand words.

Note: All the examples are using ES6, be sure is supported in your browser or modify as needed, Chrome recommended.

Methods

Method		Description
`setGradient()`		Initializes `colorGradient` with two or more hex color values. Should always be defined.
`setMidpoint(n)`		Defines number of midpoints. Defaults to 10.
`getArray()`		Returns an array of hex color values .
`getColor(n)`		Returns single hex color value corresponding to the provided index.

Usage

Using 2 colors and default (10) midpoints to generate an array of hex color values:

import colorGradient from "javascript-color-gradient";

const gradientArray = colorGradient.setGradient("#3F2CAF", "e9446a").getArray();

console.log(gradientArray);
// ["#502ea8", "#6131a1", "#72339a", "#833693", "#94388d", "#a53a86", "#b63d7f", "#c73f78", "#d84271", "#e9446a"]

Using 4 colors and 20 midpoints to generate an array of hex color values :

import colorGradient from "javascript-color-gradient";

const gradientArray = colorGradient
  .setGradient("#3F2CAF", "#e9446a", "#edc988", "#607D8B")
  .setMidpoint(20)
  .getArray();

console.log(gradientArray);
// ["#5930a5", "#72339a", "#8c3790", "#a53a86", "#bf3e7b", "#d84271", "#e94b6c", "#ea5f70", "#ea7375", "#eb8779", …]

Using two colors and default (10) midpoints to return single hex color value corresponding to the provided index:

import colorGradient from "javascript-color-gradient";

const colorAtTwo = colorGradient.setGradient("#3F2CAF", "e9446a").getColor(2);

console.log(colorAtTwo);
// #502ea8

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

javascript-color-gradient is MIT licensed.

Contributors

Special thanks to all the contributors who have contributed for this project.