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