or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

accessibility.mdcolor-analysis.mdcolor-conversion.mdcolor-creation.mdcolor-modification.mdcolor-schemes.mdindex.mdutilities.md
tile.json

tessl/npm-tinycolor2

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/tinycolor2@1.6.x

To install, run

npx @tessl/cli install tessl/npm-tinycolor2@1.6.0

index.mddocs/

TinyColor2

TinyColor2 is a comprehensive JavaScript color manipulation and conversion library that provides fast, dependency-free color processing capabilities. It accepts multiple input formats (hex, RGB, HSL, HSV, named colors) and offers extensive conversion between color spaces, color analysis functions (brightness, contrast, readability), and color manipulation methods (lighten, darken, saturate, complement). The library is designed for maximum compatibility across environments including Node.js, browsers (both UMD and ESM formats), and Deno.

Package Information

  • Package Name: tinycolor2
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install tinycolor2

Core Imports

import tinycolor from "tinycolor2";

For CommonJS:

const tinycolor = require("tinycolor2");

Basic Usage

import tinycolor from "tinycolor2";

// Create colors from various formats
const red = tinycolor("red");
const hex = tinycolor("#ff0000");
const rgb = tinycolor("rgb(255, 0, 0)");
const hsl = tinycolor({ h: 0, s: 1, l: 0.5 });

// Check color properties
console.log(red.isValid());        // true
console.log(red.isDark());         // true
console.log(red.getBrightness());  // 76.245

// Convert between formats
console.log(red.toHexString());    // "#ff0000"
console.log(red.toRgbString());    // "rgb(255, 0, 0)"
console.log(red.toHslString());    // "hsl(0, 100%, 50%)"

// Modify colors
const lightRed = red.lighten(20);
const darkRed = red.darken(20);
const complement = red.complement();

Architecture

TinyColor2 is built around several key components:

  • Constructor Function: Main tinycolor() function that creates color instances from various input formats
  • Instance Methods: Color manipulation, conversion, and analysis methods available on color objects
  • Static Methods: Utility functions for color comparison, mixing, and accessibility calculations
  • Color Parser: Robust input parsing supporting hex, RGB, HSL, HSV, and named color formats
  • Constants: Named color constants and hex-to-name lookup tables

Capabilities

Color Creation and Parsing

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

function tinycolor(color, opts);

Color Creation

Color Information and Analysis

Methods for analyzing color properties including darkness, brightness, luminance, and validity checks.

// Instance methods for color analysis
isDark(): boolean;
isLight(): boolean;
isValid(): boolean;
getBrightness(): number;
getLuminance(): number;
getAlpha(): number;
getOriginalInput(): any;
getFormat(): string;

Color Analysis

Color Format Conversion

Comprehensive conversion methods for transforming colors between different format representations (hex, RGB, HSL, HSV, named colors).

// Instance methods for format conversion
toHex(allow3Char?: boolean): string;
toHexString(allow3Char?: boolean): string;
toHex8(allow4Char?: boolean): string;
toHex8String(allow4Char?: boolean): string;
toRgb(): {r: number, g: number, b: number, a: number};
toRgbString(): string;
toHsl(): {h: number, s: number, l: number, a: number};
toHslString(): string;
toHsv(): {h: number, s: number, v: number, a: number};
toHsvString(): string;
toName(): string | false;
toFilter(secondColor?: any): string;
toString(format?: string): string;

Color Conversion

Color Modification

Chainable methods for modifying color properties including lightening, darkening, saturation adjustments, and hue rotation.

// Instance methods for color modification (all chainable)
setAlpha(value: number): tinycolor;
lighten(amount?: number): tinycolor;
darken(amount?: number): tinycolor;
brighten(amount?: number): tinycolor;
desaturate(amount?: number): tinycolor;
saturate(amount?: number): tinycolor;
greyscale(): tinycolor;
spin(amount: number): tinycolor;
clone(): tinycolor;

Color Modification

Color Schemes and Combinations

Methods for generating color schemes including complements, triads, tetrads, analogous colors, and monochromatic variations.

// Instance methods for color combinations
complement(): tinycolor;
analogous(results?: number, slices?: number): tinycolor[];
monochromatic(results?: number): tinycolor[];
splitcomplement(): tinycolor[];
triad(): tinycolor[];
tetrad(): tinycolor[];

Color Schemes

Accessibility and Readability

Static methods for calculating color contrast ratios and determining readability according to WCAG guidelines.

// Static methods for accessibility
tinycolor.readability(color1: any, color2: any): number;
tinycolor.isReadable(color1: any, color2: any, wcag2?: object): boolean;
tinycolor.mostReadable(baseColor: any, colorList: any[], args?: object): tinycolor;

Accessibility

Utility Functions

Additional utility functions for color comparison, mixing, random color generation, and working with ratio-based values.

// Static utility methods
tinycolor.equals(color1: any, color2: any): boolean;
tinycolor.mix(color1: any, color2: any, amount?: number): tinycolor;
tinycolor.random(): tinycolor;
tinycolor.fromRatio(color: object, opts?: object): tinycolor;

Utilities

Constants

// Named color constants
tinycolor.names: {[colorName: string]: string};

// Hex to name lookup
tinycolor.hexNames: {[hexValue: string]: string};

Input Formats

TinyColor2 accepts colors in multiple formats:

  • Hex: #fff, #ffffff, #ffff, #ffffffff
  • RGB: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
  • HSL: hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)
  • HSV: hsv(0, 100%, 100%), hsva(0, 100%, 100%, 0.5)
  • Named: red, blue, transparent, and 147 CSS named colors
  • Objects: {r: 255, g: 0, b: 0}, {h: 0, s: 1, l: 0.5}, {h: 0, s: 1, v: 1}
  • TinyColor instances: Existing tinycolor objects

Type Definitions

// Color object formats
interface RgbColor {
  r: number;  // 0-255
  g: number;  // 0-255
  b: number;  // 0-255
  a?: number; // 0-1
}

interface HslColor {
  h: number;  // 0-360
  s: number;  // 0-1
  l: number;  // 0-1
  a?: number; // 0-1
}

interface HsvColor {
  h: number;  // 0-360
  s: number;  // 0-1
  v: number;  // 0-1
  a?: number; // 0-1
}

// Constructor options
interface TinyColorOptions {
  format?: string;
  gradientType?: string;
}

// WCAG readability options
interface WCAG2Options {
  level?: "AA" | "AAA";
  size?: "small" | "large";
}