tinycolor2

After installing via npm, you can import TinyColor into your scripts using either CommonJS require or ESM import syntax.

// CommonJS
var tinycolor = require("tinycolor2");
var color = tinycolor("red");

// ESM
import tinycolor from "tinycolor2";
var color = tinycolor("red");

You can include TinyColor in a browser using ESM modules via a CDN like esm.sh, or by using a UMD script tag.

<!-- ESM approach -->
<script type='module'>
import tinycolor from "https://esm.sh/tinycolor2";
var color = tinycolor("red");
</script>

<!-- UMD approach -->
<script type='text/javascript' src='tinycolor.js'></script>
<script type='text/javascript'>
var color = tinycolor("red");
</script>

To use TinyColor in a Node.js environment, install the tinycolor2 package using npm.

npm install tinycolor2

Generate arrays of related colors using these combination methods:

• analogous(results, slices): Returns an array of TinyColor objects.
• monochromatic(results): Returns an array of TinyColor objects.
• splitcomplement(): Returns an array of TinyColor objects.
• triad(): Returns an array of TinyColor objects.
• tetrad(): Returns an array of TinyColor objects.
• complement(): Returns a single TinyColor object representing the complement.

Use tinycolor.readability(color1, color2) to get the contrast ratio between two colors based on WCAG 2.0 guidelines. This returns a numeric value.

tinycolor.readability("#000", "#000"); // 1
tinycolor.readability("#000", "#111"); // 1.1121078324840545
tinycolor.readability("#000", "#fff"); // 21

These methods manipulate the current color and return the TinyColor instance for chaining:

• lighten(amount): Lightens color by 0-100 (default 10). 100 returns white.
• brighten(amount): Brightens color by 0-100 (default 10).
• darken(amount): Darkens color by 0-100 (default 10). 100 returns black.
• desaturate(amount): Desaturates color by 0-100 (default 10). 100 is equivalent to greyscale().
• saturate(amount): Saturates color by 0-100 (default 10).
• greyscale(): Completely desaturates the color.
• spin(amount): Spins the hue by -360 to 360 degrees.

Given a base color and an array of potential colors, tinycolor.mostReadable(baseColor, colorList, options) returns the color from the list that provides the best readability.

Options:

• includeFallbackColors: If true, and no colors in the list are readable, it will return the better of black or white.
• level: "AA" or "AAA".
• size: "small" or "large".

You can generate a random color using the tinycolor.random() method. The returned object can then be converted to various formats like RGB.

var color = tinycolor.random();
color.toRgb(); // "{r: 145, g: 40, b: 198, a: 1}"

You can create a TinyColor instance by calling tinycolor(input) or new tinycolor(input). The library is highly permissive with string inputs and supports several object formats.

// String inputs
tinycolor("#000");
tinycolor("rgb(255, 0, 0)");
tinycolor("hsl(0, 100%, 50%)");
tinycolor("hsv(0, 100%, 100%)");
tinycolor("red");

// Object inputs
tinycolor({ r: 255, g: 0, b: 0 });
tinycolor({ h: 0, s: 100, l: 50 });

// Ratio-based inputs (0-1)
tinycolor.fromRatio({ r: 1, g: 0, b: 0 });
tinycolor.fromRatio({ h: 1, s: 0, l: 0 });

Manage the transparency of a color using getAlpha() and setAlpha(alpha) where alpha is a value between 0-1.

var color = tinycolor("red");
color.getAlpha(); // 1
color.setAlpha(.5);
color.getAlpha(); // .5

Convert a TinyColor instance into various string formats or objects. Note that toHsv, toHsl, and toRgb return objects that include an a (alpha) property.

String formats:

• toHexString(): Returns hex string (e.g., "#ff0000").
• toHex8String(): Returns 8-digit hex string.
• toRgbString(): Returns rgb() or rgba() string.
• toHsvString() / toHslString(): Returns hsv() or hsl() string.
• toString([format]): Returns string in the original format, or a specified format like "rgb", "hex6", "hsl", etc.

Object formats:

• toHsv(), toHsl(), toRgb(), toHex(), toHex8()

var color = tinycolor("red");
color.toHexString(); // "#ff0000"
color.toRgbString(); // "rgb(255, 0, 0)"
color.toString("hsv"); // "hsv(0, 100%, 100%)"

TinyColor provides static utility methods for comparing and blending colors:

• tinycolor.equals(color1, color2): Compares two colors for equality.
• tinycolor.mix(color1, color2, amount = 50): Blends two colors. The amount parameter (defaulting to 50) determines the weight of the second color.