tessl/npm-tinycolor2

Fast color parsing and manipulation library with comprehensive conversion and accessibility features

—

Pending

Overview

Eval results

Files

Color Creation and Parsing

Name: tessl/npm-tinycolor2
Author: tessl

Core color creation functionality that accepts various input formats and creates tinycolor instances for manipulation and analysis.

Capabilities

Main Constructor

Creates a tinycolor instance from various color input formats.

/**
 * Creates a tinycolor instance from various input formats
 * @param color - Color input (string, object, or tinycolor instance)
 * @param opts - Optional configuration object
 * @returns tinycolor instance
 */
function tinycolor(color, opts);

Parameters:

color: Can be hex string, RGB/RGBA/HSL/HSLA/HSV/HSVA string, named color, color object, or existing tinycolor instance
opts: Optional object with format (string) and gradientType (string) properties

Usage Examples:

import tinycolor from "tinycolor2";

// String formats
const red = tinycolor("red");
const hex = tinycolor("#ff0000");
const hex3 = tinycolor("#f00");
const hex8 = tinycolor("#ff0000ff");
const rgb = tinycolor("rgb(255, 0, 0)");
const rgba = tinycolor("rgba(255, 0, 0, 0.5)");
const hsl = tinycolor("hsl(0, 100%, 50%)");
const hsla = tinycolor("hsla(0, 100%, 50%, 0.8)");

// Object formats
const rgbObj = tinycolor({ r: 255, g: 0, b: 0 });
const rgbaObj = tinycolor({ r: 255, g: 0, b: 0, a: 0.5 });
const hslObj = tinycolor({ h: 0, s: 1, l: 0.5 });
const hslaObj = tinycolor({ h: 0, s: 1, l: 0.5, a: 0.8 });
const hsvObj = tinycolor({ h: 0, s: 1, v: 1 });

// With options
const color = tinycolor("#ff0000", { format: "hex" });

// From existing tinycolor (creates copy)
const copy = tinycolor(red);

Static Creation Methods

From Ratio Values

Creates a tinycolor instance from ratio-based color values (0-1 range).

/**
 * Creates a tinycolor from ratio values (0-1 range)
 * @param color - Color object with ratio values
 * @param opts - Optional configuration object
 * @returns tinycolor instance
 */
tinycolor.fromRatio(color, opts);

Usage Examples:

// RGB ratios (0-1 instead of 0-255)
const red = tinycolor.fromRatio({ r: 1, g: 0, b: 0 });
const halfRed = tinycolor.fromRatio({ r: 0.5, g: 0, b: 0 });

// HSL ratios
const blue = tinycolor.fromRatio({ h: 0.67, s: 1, l: 0.5 });

// With alpha
const transparentRed = tinycolor.fromRatio({ r: 1, g: 0, b: 0, a: 0.5 });

Random Color Generation

Generates a random color.

/**
 * Generates a random color
 * @returns tinycolor instance with random color
 */
tinycolor.random();

Usage Examples:

const randomColor = tinycolor.random();
console.log(randomColor.toHexString()); // e.g., "#a3f7b2"

// Generate multiple random colors
const palette = Array.from({ length: 5 }, () => tinycolor.random());

Supported Input Formats

Hex Formats

3-character hex: #rgb (e.g., #f00)
6-character hex: #rrggbb (e.g., #ff0000)
4-character hex with alpha: #rgba (e.g., #f00f)
8-character hex with alpha: #rrggbbaa (e.g., #ff0000ff)
Without hash: rgb, rrggbb, rgba, rrggbbaa

String Formats

RGB: rgb(r, g, b) where r,g,b are 0-255
RGBA: rgba(r, g, b, a) where r,g,b are 0-255 and a is 0-1
HSL: hsl(h, s%, l%) where h is 0-360, s and l are percentages
HSLA: hsla(h, s%, l%, a) where h is 0-360, s and l are percentages, a is 0-1
HSV: hsv(h, s%, v%) where h is 0-360, s and v are percentages
HSVA: hsva(h, s%, v%, a) where h is 0-360, s and v are percentages, a is 0-1

Object Formats

RGB Object: {r: number, g: number, b: number, a?: number}
HSL Object: {h: number, s: number, l: number, a?: number}
HSV Object: {h: number, s: number, v: number, a?: number}

Named Colors

Supports all 147 CSS named colors including:

Basic colors: red, green, blue, yellow, black, white, transparent
Extended colors: aliceblue, antiquewhite, aqua, aquamarine, etc.

Special Cases

Empty/null input: Returns black color with isValid() returning false
Invalid input: Returns black color with isValid() returning false
TinyColor instance: Returns the same instance (no copy made unless explicitly cloned)

Validation

All created colors can be validated using the isValid() method:

const valid = tinycolor("red");
const invalid = tinycolor("not-a-color");

console.log(valid.isValid());   // true
console.log(invalid.isValid()); // false

Install with Tessl CLI