CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-color

Color conversion and manipulation with CSS string support

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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)

docs

analysis.md

channels.md

construction.md

conversion.md

index.md

manipulation.md

tile.json