Javascript-color-gradient NPM

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 { Gradient } 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
`setColorGradient()`		Initializes `{Gradient}` with two or more hex color values. Should always be defined.
`setMidpoint(n)`		Defines number of midpoints. Defaults to 10.
`getColors()`		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 { Gradient } from "javascript-color-gradient";

const gradientArray = new Gradient()
  .setColorGradient("#3F2CAF", "e9446a")
  .getColors();

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 = new Gradient()
  .setColorGradient("#3F2CAF", "#e9446a", "#edc988", "#607D8B")
  .setMidpoint(20)
  .getColors();

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 { Gradient } from "javascript-color-gradient";

const colorAtIndexTwo = new Gradient()
  .setColorGradient("#3F2CAF", "e9446a")
  .setMidpoint(20)
  .getColor(2);

console.log(colorAtIndexTwo);
// #5930a5