radient
Radient makes it easy to take a series of colors and extrapolate information it, whether it be an evenly spaced array of colors, or a color at a specific point. Radient uses Color classes to represent gradient stops.
Install
$ npm install radient
Usage
Passing an Array of colors will generate a gradient with evenly spaced stops (i.e. a three color gradient will have a stop a 0, 50% and 100%)
var gradient = Radient("#00ffff", #ff00ff, #ffff00);
Radient uses the color
library to represent colors, so all color
representations will work
var gradient = Radient(
"rgb(225, 241, 101)",
Color().hsl([56, 60, 88]),
Color("25b34b"),
{c: 100, y: 100, m: 0, k: 0}
);
Alternatively, color stops can be set one at a time
var gradient = Radient();
gradient.stop("#ffb90d");
gradient.stop("#cc0045");
gradient.stop("#009980");
Gradients are 1 unit long, so gradient stops should be between 0 and 1
var gradient = Radient();
gradient.stop("#6abfeb", 0);
gradient.stop("#b9d3c3", 0.25);
gradient.stop("#f7e998", 0.5);
gradient.stop("#f4bcac", 0.75);
gradient.stop("#f495b3", 1);
Gradients can also be loaded from a JSON object
var arr = [
{
color: "rgb(255, 255, 255)",
location: 0.5
},
{
color: "#2989cc",
location: 0
},
{
color: Color("white"),
location: 1
},
{
color: Color().rgb(144, 106, 0),
location: 0.52
},
{
color: Color().cymk([16, 37, 100, 1]),
location: 0.64
}
];
var gradient = Radient(arr);
Colors
To retrieve information from Radient, you can get a color
object from any stop
along the gradient.
var gradient = Radient("black", "white");
gradient.color(0.5).rgb(); // {r: 128, g: 128, b: 128}
You can also get a color 'angle' in degrees
gradient.angle(180);
Arrays
You can also get an array of evenly spaced color stops. The default number of stops is 8. Note that this function may result in a loss of precision in your gradient.
var gradient = Radient("#7e11a7", "#55ed20");
gradient.array(5);
/* [
'#7e11a7',
'#763d8b',
'#697f63',
'#5dc13b',
'#55ed20'
] */