https://github.com/mistic100/tinygradient

Fast and small gradients manipulation, built on top of TinyColor
https://github.com/mistic100/tinygradient

colors gradient

Last synced: 29 days ago
JSON representation

Fast and small gradients manipulation, built on top of TinyColor

• Host: GitHub
• URL: https://github.com/mistic100/tinygradient
• Owner: mistic100
• License: mit
• Created: 2014-06-18T12:00:51.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2023-10-09T11:19:28.000Z (about 1 year ago)
• Last Synced: 2024-10-29T22:56:47.907Z (about 1 month ago)
• Topics: colors, gradient
• Language: JavaScript
• Homepage: https://mistic100.github.io/tinygradient
• Size: 183 KB
• Stars: 196
• Watchers: 5
• Forks: 22
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-gradient - tinygradient - Fast and small gradients manipulation, built on top of TinyColor. (JavaScript)

README

        
# tinygradient

[![npm version](https://img.shields.io/npm/v/tinygradient.svg?style=flat-square)](https://www.npmjs.com/package/tinygradient)

[![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/tinygradient/badge)](https://www.jsdelivr.com/package/npm/tinygradient)

[![GZIP size](https://img.shields.io/bundlephobia/minzip/tinygradient?label=gzip%20size)](https://bundlephobia.com/result?p=tinygradient)

[![Build Status](https://github.com/mistic100/tinygradient/workflows/CI/badge.svg)](https://github.com/mistic100/tinygradient/actions)

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

[Live demo](https://mistic100.github.io/tinygradient/)

## Installation

```

$ npm install tinygradient

```

### Dependencies

- [TinyColor](https://github.com/bgrins/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.

```javascript

// 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](https://github.com/bgrins/TinyColor/blob/master/README.md#accepted-string-input).

```javascript

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.

```javascript

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

```javascript

// RGB interpolation

var colorsRgb = gradient.rgb(9);

```

![rgb](https://raw.githubusercontent.com/mistic100/tinygradient/master/images/rgb.png)

```javascript

// HSV clockwise interpolation

var colorsHsv = gradient.hsv(9);

```

![hsv](https://raw.githubusercontent.com/mistic100/tinygradient/master/images/hsv.png)

```javascript

// HSV counter-clockwise interpolation

var colorsHsv = gradient.hsv(9, true);

```

![hsv2](https://raw.githubusercontent.com/mistic100/tinygradient/master/images/hsv2.png)

There are also two methods which will automatically choose between clockwise and counter-clockwise.

```javascript

// 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](https://github.com/bgrins/TinyColor/blob/master/README.md#methods).

### Get CSS gradient string

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

```javascript

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

```

### Get color at a specific position

Returns a single TinyColor object from a defined position in the gradient (from 0 to 1).

```javascript

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

```javascript

var reversedGradient = gradient.reverse();

```

### Loop the gradient

Returns a new instance of TinyGradient with looped colors.

```javascript

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

```js

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