
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
tinygradient
Advanced tools
The tinygradient npm package is a lightweight library for creating and manipulating gradients. It allows you to generate gradients with multiple colors, interpolate colors, and convert gradients to different formats.
Creating a Gradient
This feature allows you to create a gradient by specifying an array of color stops. The example creates a gradient from red to green to blue.
const tinygradient = require('tinygradient');
const gradient = tinygradient(['#ff0000', '#00ff00', '#0000ff']);
console.log(gradient);
Getting Colors from a Gradient
This feature allows you to get an array of colors from the gradient. The example gets 10 colors from the gradient.
const tinygradient = require('tinygradient');
const gradient = tinygradient(['#ff0000', '#00ff00', '#0000ff']);
const colors = gradient.rgb(10);
console.log(colors);
Converting Gradient to CSS
This feature allows you to convert the gradient to a CSS gradient string. The example converts the gradient to a linear gradient going to the right.
const tinygradient = require('tinygradient');
const gradient = tinygradient(['#ff0000', '#00ff00', '#0000ff']);
const cssGradient = gradient.css('linear', 'to right');
console.log(cssGradient);
Chroma.js is a powerful library for color manipulation and conversion. It supports a wide range of color spaces and provides functions for color interpolation, blending, and more. Compared to tinygradient, chroma-js offers more advanced color manipulation features but may be more complex to use for simple gradient tasks.
Gradient-color is a simple library for generating gradient colors. It allows you to create gradients with multiple colors and get interpolated colors from the gradient. Compared to tinygradient, gradient-color is more focused on generating color arrays and may lack some of the advanced features of tinygradient.
Color-gradient is a lightweight library for creating color gradients. It provides basic functionality for generating gradients and getting colors from the gradient. Compared to tinygradient, color-gradient is simpler and may be easier to use for basic gradient tasks but lacks some of the advanced features of tinygradient.
Easily generate color gradients with an unlimited number of color stops and steps.
Built on top of TinyColor.
Compatible with Require.js/AMD and NodeJS.
The gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.
The tinygradient
constructor takes a list or an array of colors stops.
// using varargs
var gradient = tinygradient('red', 'green', 'blue');
// using array
var gradient = tinygradient([
'#ff0000',
'#00ff00',
'#0000ff'
]);
The colors are parsed with TinyColor, multiple formats are accepted.
var gradient = tinygradient([
tinycolor('#ff0000'), // tinycolor object
{r: 0, g: 255, b: 0}, // RGB object
{h: 240, s: 1, v: 1, a: 1}, // HSVa object
'rgb(120, 120, 0)', // RGB CSS string
'gold' // named color
]);
You can also specify the position of each color stop (between 0
and 1
). If no position is specified, stops are distributed equidistantly.
var gradient = tinygradient([
{color: '#d8e0de', pos: 0},
{color: '#255B53', pos: 0.8},
{color: '#000000', pos: 1}
]);
Each method takes at least the number of desired steps.
The generated gradients might have one more step in certain conditions.
// RGB interpolation
var colorsRgb = gradient.rgb(9);
// HSV clockwise interpolation
var colorsHsv = gradient.hsv(9);
// HSV counter-clockwise interpolation
var colorsHsv = gradient.hsv(9, true);
There are also two methods which will automatically choose between clockwise and counter-clockwise.
// HSV interpolation using shortest arc between colors
var colorsHsv = gradient.hsv(9, 'short');
// HSV interpolation using longest arc between colors
var colorsHsv = gradient.hsv(9, 'long');
Each method returns an array of TinyColor objects, see available methods.
The css
method will output a valid W3C string (without vendors prefix) to use with background-image
CSS property.
// linear gradient to right (default)
var gradientStr = gradient.css();
// radial gradient ellipse at top left
var gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');
Returns a single TinyColor object from a defined position in the gradient (from 0 to 1).
// with RGB interpolation
colorAt55Percent = gradient.rgbAt(0.55);
// with HSV interpolation
colorAt55Percent = gradient.hsvAt(0.55);
Returns a new instance of TinyGradient with reversed colors.
var reversedGradient = gradient.reverse();
A Mocha test suite is available.
npm install
npm test
FAQs
Fast and small gradients manipulation, built on top of TinyColor
The npm package tinygradient receives a total of 1,005,734 weekly downloads. As such, tinygradient popularity was classified as popular.
We found that tinygradient demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.