Typescript Color Gradient

All credits to Adrinlol, original creator of this simple yet amazing library

typescript-color-gradient is a typescript native fork of javascript-color-gradient, a 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.

For the original creator of the library, this is the repository

Installation

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

npm install typescript-color-gradient

Then import the module into your JavaScript:

import { Gradient } from "typescript-color-gradient";

Methods

Method		Description
setGradient()		Initializes colorGradient with two or more hex color values. Should always be defined.
setNumberOfColors(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

Generate a random gradient

import { Gradient } from "typescript-color-gradient";

const gradientArray = new Gradient().getColors();

console.log(gradientArray);
// [... a a gradient with 10 colors starting by generating a random color and his opposite hex string value]

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

import { Gradient } from "typescript-color-gradient";

const gradientArray = new Gradient().setGradient("#3F2CAF").getColors();

console.log(gradientArray);
// [... a a gradient with 10 colors starting by the selected color and his opposite hex string value]

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

import { Gradient } from "typescript-color-gradient";

const gradientArray = new Gradient().setGradient("#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 { Gradient } from "typescript-color-gradient";

const gradientArray = new Gradient()
  .setGradient("#3F2CAF", "#e9446a", "#edc988", "#607D8B")
  .setNumberOfColors(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 "typescript-color-gradient";

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

// colors: ["#502ea8", "#6131a1", "#72339a", "#833693", "#94388d", "#a53a86", "#b63d7f", "#c73f78", "#d84271", "#e9446a"]

console.log(colorAtTwo);
// #72339a

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

typescript-color-gradient is MIT licensed.

Quotes

Again thanks to Adrinlol for his work and letting me fork his job. If anyone wants to contribute with a donation, i kindly ask to send it to The original creator