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 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";
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.
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. |
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 Gradient 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
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.
javascript-color-gradient
is MIT licensed.
Special thanks to all the contributors who have contributed for this project.