tinygradient

What is tinygradient?

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.

What are tinygradient's main functionalities?

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);

Other packages similar to tinygradient

chroma-js

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

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

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.

README

tinygradient

Easily generate color gradients with an unlimited number of color stops and steps.

Live demo

Installation

$ npm install tinygradient

Dependencies

• TinyColor

Usage

The gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.

Initialize gradient

The tinygradient constructor takes a list or an array of colors stops.

// using varargs
const gradient = tinygradient('red', 'green', 'blue');

// using array
const gradient = tinygradient([
  '#ff0000',
  '#00ff00',
  '#0000ff'
]);

The colors are parsed with TinyColor, multiple formats are accepted.

const 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.

const gradient = tinygradient([
  {color: '#d8e0de', pos: 0},
  {color: '#255B53', pos: 0.8},
  {color: '#000000', pos: 1}
]);

Generate gradient

Each method takes at least the number of desired steps.

The generated gradients might have one more step in certain conditions.

// RGB interpolation
const colorsRgb = gradient.rgb(9);

// HSV clockwise interpolation
const colorsHsv = gradient.hsv(9);

// HSV counter-clockwise interpolation
const 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
const colorsHsv = gradient.hsv(9, 'short');

// HSV interpolation using longest arc between colors
const colorsHsv = gradient.hsv(9, 'long');

Each method returns an array of TinyColor objects, see available methods.

Get CSS gradient string

The css method will output a valid W3C string (without vendors prefix) to use with background-image CSS property.

// linear gradient to right (default)
const gradientStr = gradient.css();

// radial gradient ellipse at top left
const gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');

Get color at a specific position

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);

Reversing gradient

Returns a new instance of TinyGradient with reversed colors.

const reversedGradient = gradient.reverse();

Loop the gradient

Returns a new instance of TinyGradient with looped colors.

const loopedGradient = gradient.loop();

Position-only stops

I is possible to define stops with the pos property only and no color. This allows to define the position of the mid-point between the previous and the next stop.

const gradient = tinygradient([
  {color: 'black', pos: 0},
  {pos: 0.8}, // #808080 will be at 80% instead of 50%
  {color: 'white', pos: 1}
]);

License

This library is available under the MIT license.