or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

analysis.mdchannels.mdconstruction.mdconversion.mdindex.mdmanipulation.md
tile.json

construction.mddocs/

Color Construction

Comprehensive color construction capabilities supporting multiple input formats and color models for creating Color instances.

Capabilities

Main Constructor

Creates a Color instance from various input formats with optional model specification.

/**
 * Creates a Color instance from various input formats
 * @param object - Color input (string, array, number, object, or Color instance)
 * @param model - Optional color model hint for interpretation
 * @returns ColorInstance for chaining operations
 */
function Color(object?: ColorLike, model?: string): ColorInstance;

type ColorLike = ColorInstance | string | ArrayLike<number> | number | Record<string, any>;

Usage Examples:

import Color from "color";

// String formats (CSS colors)
const red = Color('#FF0000');
const blue = Color('rgb(0, 0, 255)');
const green = Color('hsl(120, 100%, 50%)');
const purple = Color('purple');
const transparentRed = Color('rgba(255, 0, 0, 0.5)');

// Object formats
const yellow = Color({r: 255, g: 255, b: 0});
const cyan = Color({h: 180, s: 100, l: 50});
const magenta = Color({c: 0, m: 100, y: 0, k: 0});

// Array formats
const white = Color([255, 255, 255]);
const gray = Color([128, 128, 128, 0.8]); // with alpha

// Number format (RGB as single number)
const orange = Color(0xFF8000);

// Copy from existing Color instance
const lightOrange = Color(orange);

// null/undefined creates black
const black = Color();
const alsoBlack = Color(null);

Static RGB Constructor

Creates Color instances specifically in RGB color model.

/**
 * Creates RGB Color instance from values or ColorLike input
 * @param values - RGB values as separate parameters or single ColorLike input
 * @returns ColorInstance in RGB model
 */
function rgb(...values: number[]): ColorInstance;
function rgb(color: ColorLike): ColorInstance;

Usage Examples:

// RGB values as parameters
Color.rgb(255, 0, 0);           // Red
Color.rgb(255, 0, 0, 0.5);      // Semi-transparent red
Color.rgb(0xFF, 0x00, 0x00);    // Hex notation

// RGB array
Color.rgb([255, 0, 0]);
Color.rgb([255, 0, 0, 0.5]);    // With alpha

// RGB object
Color.rgb({r: 255, g: 0, b: 0});

Static HSL Constructor

Creates Color instances in HSL (Hue, Saturation, Lightness) color model.

/**
 * Creates HSL Color instance
 * @param values - HSL values (hue: 0-360, saturation: 0-100, lightness: 0-100)
 * @returns ColorInstance in HSL model
 */
function hsl(...values: number[]): ColorInstance;
function hsl(color: ColorLike): ColorInstance;

Usage Examples:

// HSL values as parameters
Color.hsl(120, 100, 50);      // Pure green
Color.hsl(240, 100, 50, 0.8); // Semi-transparent blue

// HSL array
Color.hsl([120, 100, 50]);

// HSL object
Color.hsl({h: 120, s: 100, l: 50});

Static HSV Constructor

Creates Color instances in HSV (Hue, Saturation, Value) color model.

/**
 * Creates HSV Color instance
 * @param values - HSV values (hue: 0-360, saturation: 0-100, value: 0-100)
 * @returns ColorInstance in HSV model
 */
function hsv(...values: number[]): ColorInstance;
function hsv(color: ColorLike): ColorInstance;

Static HWB Constructor

Creates Color instances in HWB (Hue, Whiteness, Blackness) color model.

/**
 * Creates HWB Color instance
 * @param values - HWB values (hue: 0-360, whiteness: 0-100, blackness: 0-100)
 * @returns ColorInstance in HWB model
 */
function hwb(...values: number[]): ColorInstance;
function hwb(color: ColorLike): ColorInstance;

Static CMYK Constructor

Creates Color instances in CMYK (Cyan, Magenta, Yellow, Key/Black) color model.

/**
 * Creates CMYK Color instance
 * @param values - CMYK values (all 0-100 percentages)
 * @returns ColorInstance in CMYK model
 */
function cmyk(...values: number[]): ColorInstance;
function cmyk(color: ColorLike): ColorInstance;

Static XYZ Constructor

Creates Color instances in CIE XYZ color space.

/**
 * Creates XYZ Color instance
 * @param values - XYZ values
 * @returns ColorInstance in XYZ model
 */
function xyz(...values: number[]): ColorInstance;
function xyz(color: ColorLike): ColorInstance;

Static LAB Constructor

Creates Color instances in CIE LAB color space.

/**
 * Creates LAB Color instance
 * @param values - LAB values (L: 0-100, a: -128 to 127, b: -128 to 127)
 * @returns ColorInstance in LAB model
 */
function lab(...values: number[]): ColorInstance;
function lab(color: ColorLike): ColorInstance;

Static LCH Constructor

Creates Color instances in LCH (Lightness, Chroma, Hue) color space.

/**
 * Creates LCH Color instance
 * @param values - LCH values (L: 0-100, C: 0+, H: 0-360)
 * @returns ColorInstance in LCH model
 */
function lch(...values: number[]): ColorInstance;
function lch(color: ColorLike): ColorInstance;

Static ANSI16 Constructor

Creates Color instances for 16-color ANSI terminal colors.

/**
 * Creates ANSI16 Color instance
 * @param values - ANSI16 color code (0-15) and optional alpha
 * @returns ColorInstance in ANSI16 model
 */
function ansi16(...values: number[]): ColorInstance;
function ansi16(color: ColorLike): ColorInstance;

Static ANSI256 Constructor

Creates Color instances for 256-color ANSI terminal colors.

/**
 * Creates ANSI256 Color instance
 * @param values - ANSI256 color code (0-255) and optional alpha
 * @returns ColorInstance in ANSI256 model
 */
function ansi256(...values: number[]): ColorInstance;
function ansi256(color: ColorLike): ColorInstance;

Static HCG Constructor

Creates Color instances in HCG (Hue, Chroma, Grayness) color model.

/**
 * Creates HCG Color instance
 * @param values - HCG values (hue: 0-360, chroma: 0-100, grayness: 0-100)
 * @returns ColorInstance in HCG model
 */
function hcg(...values: number[]): ColorInstance;
function hcg(color: ColorLike): ColorInstance;

Static Apple Constructor

Creates Color instances in Apple's color format.

/**
 * Creates Apple Color instance
 * @param values - Apple RGB values (0-65535 range)
 * @returns ColorInstance in Apple model
 */
function apple(...values: number[]): ColorInstance;
function apple(color: ColorLike): ColorInstance;

Usage Examples:

Color.apple(65535, 0, 0);        // Red in Apple format
Color.apple([65535, 65535, 0]);  // Yellow in Apple format

Input Format Support

String Formats

Supports all CSS color string formats via the color-string library:

  • Hex: #FF0000, #F00, #FF000080 (with alpha)
  • RGB: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
  • HSL: hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.8)
  • Named Colors: red, blue, lightsteelblue, etc.
  • Percentage RGB: rgb(100%, 0%, 0%)

Object Formats

Color channel objects with appropriate property names:

  • RGB: {r: 255, g: 0, b: 0, alpha?: 0.5}
  • HSL: {h: 120, s: 100, l: 50, alpha?: 0.8}
  • HSV: {h: 240, s: 100, v: 100}
  • CMYK: {c: 0, m: 100, y: 100, k: 0}
  • Other models with appropriate channel names

Array Formats

Numeric arrays with values in model-specific ranges:

  • RGB: [255, 0, 0] or [255, 0, 0, 0.5]
  • HSL: [120, 100, 50] or [120, 100, 50, 0.8]
  • Other models with appropriate value ranges

Number Format

Single numeric value interpreted as RGB:

  • 0xFF0000 → RGB(255, 0, 0) (red)
  • 0x00FF00 → RGB(0, 255, 0) (green)