Complete type definitions and metadata for all 17 supported color models, including channel counts, value ranges, and label information.
TypeScript type definitions for all supported color models with their expected value ranges.
/**
* RGB (Red, Green, Blue) color model
* Standard RGB color space with 8-bit channels
*/
type RGB = [r: number, g: number, b: number];
/**
* HSL (Hue, Saturation, Lightness) color model
* Cylindrical representation of RGB color space
*/
type HSL = [h: number, s: number, l: number];
/**
* HSV (Hue, Saturation, Value) color model
* Also known as HSB (Hue, Saturation, Brightness)
*/
type HSV = [h: number, s: number, v: number];
/**
* HWB (Hue, Whiteness, Blackness) color model
* Alternative cylindrical representation
*/
type HWB = [h: number, w: number, b: number];
/**
* CMYK (Cyan, Magenta, Yellow, Key) color model
* Subtractive color model used in printing
*/
type CMYK = [c: number, m: number, y: number, k: number];
/**
* XYZ (CIE XYZ) color model
* Device-independent color space
*/
type XYZ = [x: number, y: number, z: number];
/**
* LAB (CIE LAB) color model
* Perceptually uniform color space
*/
type LAB = [l: number, a: number, b: number];
/**
* LCH (CIE LCH) color model
* Cylindrical representation of LAB color space
*/
type LCH = [l: number, c: number, h: number];
/**
* OKLAB (OK LAB) color model
* Improved perceptually uniform color space
*/
type OKLAB = [l: number, a: number, b: number];
/**
* OKLCH (OK LCH) color model
* Cylindrical representation of OKLAB color space
*/
type OKLCH = [l: number, c: number, h: number];
/**
* HCG (Hue, Chroma, Grayscale) color model
* Alternative color representation
*/
type HCG = [h: number, c: number, g: number];
/**
* Apple RGB color model
* 16-bit RGB representation used by Apple systems
*/
type Apple = [r16: number, g16: number, b16: number];
/**
* Grayscale color model
* Single-channel grayscale representation
*/
type Gray = [gray: number];
/**
* ANSI 16-color code
* Standard 16-color terminal colors (0-15)
*/
type ANSI16 = number;
/**
* ANSI 256-color code
* Extended 256-color terminal colors (0-255)
*/
type ANSI256 = number;
/**
* CSS color keyword
* Named colors from CSS specification
*/
type Keyword = string;
/**
* Hexadecimal color string
* Standard hex color representation
*/
type HEX = string;Each color model provides metadata about its channel count and labels.
/**
* Color model metadata interface
*/
interface ColorModelMetadata {
readonly channels: number;
readonly labels: string | string[];
}
/**
* Color model metadata for each supported model
*/
interface ColorModelMetadataMap {
rgb: { channels: 3; labels: 'rgb' };
hsl: { channels: 3; labels: 'hsl' };
hsv: { channels: 3; labels: 'hsv' };
hwb: { channels: 3; labels: 'hwb' };
cmyk: { channels: 4; labels: 'cmyk' };
xyz: { channels: 3; labels: 'xyz' };
lab: { channels: 3; labels: 'lab' };
lch: { channels: 3; labels: 'lch' };
oklab: { channels: 3; labels: ['okl', 'oka', 'okb'] };
oklch: { channels: 3; labels: ['okl', 'okc', 'okh'] };
hex: { channels: 1; labels: ['hex'] };
keyword: { channels: 1; labels: ['keyword'] };
ansi16: { channels: 1; labels: ['ansi16'] };
ansi256: { channels: 1; labels: ['ansi256'] };
hcg: { channels: 3; labels: ['h', 'c', 'g'] };
apple: { channels: 3; labels: ['r16', 'g16', 'b16'] };
gray: { channels: 1; labels: ['gray'] };
}Usage Examples:
import convert from 'color-convert';
// Access channel counts
console.log(convert.rgb.channels); // 3
console.log(convert.cmyk.channels); // 4
console.log(convert.hex.channels); // 1
// Access labels
console.log(convert.rgb.labels); // 'rgb'
console.log(convert.hcg.labels); // ['h', 'c', 'g']
console.log(convert.apple.labels); // ['r16', 'g16', 'b16']Standard value ranges for each color model as documented in the original package.
/**
* Value ranges for each color model
*/
interface ColorModelRanges {
RGB: {
r: [0, 255];
g: [0, 255];
b: [0, 255];
};
HSL: {
h: [0, 360];
s: [0, 100];
l: [0, 100];
};
HSV: {
h: [0, 360];
s: [0, 100];
v: [0, 100];
};
HWB: {
h: [0, 360];
w: [0, 100];
b: [0, 100];
};
CMYK: {
c: [0, 100];
m: [0, 100];
y: [0, 100];
k: [0, 100];
};
XYZ: {
x: [0, 94];
y: [0, 99];
z: [0, 108];
};
LAB: {
l: [0, 100];
a: [-86, 98];
b: [-108, 94];
};
LCH: {
l: [0, 100];
c: [0, 133];
h: [0, 360];
};
OKLAB: {
l: [0, 100];
a: [-23, 28];
b: [-31, 20];
};
OKLCH: {
l: [0, 100];
c: [0, 32];
h: [0, 360];
};
HCG: {
h: [0, 360];
c: [0, 100];
g: [0, 100];
};
Apple: {
r16: [0, 65535];
g16: [0, 65535];
b16: [0, 65535];
};
Gray: {
gray: [0, 100];
};
ANSI16: [0, 15];
ANSI256: [0, 255];
HEX: 'string (e.g., "FF0000", "#FF0000")';
Keyword: 'CSS color name (e.g., "red", "blue", "white")';
}Detailed descriptions of each color model and its use cases.
/**
* Color model descriptions and use cases
*/
interface ColorModelDescriptions {
RGB: 'Standard RGB color space with 8-bit channels (0-255). Most common for digital displays and web development.';
HSL: 'Cylindrical representation of RGB. Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Intuitive for color manipulation.';
HSV: 'Also known as HSB. Hue (0-360°), Saturation (0-100%), Value/Brightness (0-100%). Common in color pickers.';
HWB: 'Alternative cylindrical representation. Hue (0-360°), Whiteness (0-100%), Blackness (0-100%). W3C CSS Color Module Level 4.';
CMYK: 'Subtractive color model used in printing. Cyan, Magenta, Yellow, Key/Black (0-100% each).';
XYZ: 'Device-independent color space based on human vision. Foundation for other color spaces.';
LAB: 'Perceptually uniform color space. Lightness (0-100), A (-86 to 98), B (-108 to 94). Good for color difference calculations.';
LCH: 'Cylindrical representation of LAB. Lightness (0-100), Chroma (0-133), Hue (0-360°). Perceptually uniform.';
OKLAB: 'Improved perceptually uniform color space. Lightness (0-100), A (-23 to 28), B (-31 to 20). Better hue linearity than LAB.';
OKLCH: 'Cylindrical representation of OKLAB. Lightness (0-100), Chroma (0-32), Hue (0-360°). Improved perceptual uniformity.';
HCG: 'Alternative color representation. Hue (0-360°), Chroma (0-100%), Grayscale (0-100%).';
Apple: '16-bit RGB representation (0-65535 per channel). Used by Apple systems for higher precision.';
Gray: 'Single-channel grayscale representation (0-100%). Simplified color model for monochrome.';
ANSI16: '16-color ANSI terminal codes (0-15). Standard terminal colors for CLI applications.';
ANSI256: '256-color ANSI terminal codes (0-255). Extended terminal colors with more precision.';
HEX: 'Hexadecimal color strings. Common web format (e.g., "#FF0000", "FF0000").';
Keyword: 'CSS color keywords. Named colors from CSS specification (e.g., "red", "blue", "transparent").';
}The package supports all CSS color keywords through the color-name dependency.
/**
* CSS color keyword support
* Uses the color-name package for keyword-to-RGB mapping
*/
interface KeywordSupport {
/**
* Supported CSS color keywords include:
* - Basic colors: 'red', 'green', 'blue', 'white', 'black', etc.
* - Extended colors: 'aliceblue', 'antiquewhite', 'aquamarine', etc.
* - System colors: 'transparent', 'currentcolor', etc.
*
* Full list available at: https://github.com/colorjs/color-name
*/
supportedKeywords: string[];
/**
* Bidirectional mapping between keywords and RGB values
* - keyword.rgb() converts keyword to RGB
* - rgb.keyword() converts RGB to closest keyword (if exact match exists)
*/
bidirectionalMapping: boolean;
}Usage Examples:
import convert from 'color-convert';
// Keyword to RGB conversion
convert.keyword.rgb('red'); // [255, 0, 0]
convert.keyword.rgb('aliceblue'); // [240, 248, 255]
convert.keyword.rgb('transparent'); // [0, 0, 0] (with alpha)
// RGB to keyword (only if exact match exists)
convert.rgb.keyword([255, 0, 0]); // 'red'
convert.rgb.keyword([240, 248, 255]); // 'aliceblue'
convert.rgb.keyword([123, 45, 67]); // undefined (no exact match)Support for both 16-color and 256-color ANSI terminal codes.
/**
* ANSI color code support for terminal applications
*/
interface ANSIColorSupport {
/**
* ANSI 16-color codes (0-15)
* Standard terminal colors:
* 0-7: Standard colors (black, red, green, yellow, blue, magenta, cyan, white)
* 8-15: Bright/bold variants of standard colors
*/
ansi16: {
range: [0, 15];
standardColors: [0, 7];
brightColors: [8, 15];
};
/**
* ANSI 256-color codes (0-255)
* Extended terminal colors:
* 0-15: Standard ANSI colors
* 16-231: 216 colors (6×6×6 color cube)
* 232-255: 24 grayscale colors
*/
ansi256: {
range: [0, 255];
standardColors: [0, 15];
colorCube: [16, 231];
grayscale: [232, 255];
};
}Usage Examples:
import convert from 'color-convert';
// ANSI 16-color codes
convert.ansi16.rgb(1); // [128, 0, 0] (dark red)
convert.ansi16.rgb(9); // [255, 0, 0] (bright red)
convert.rgb.ansi16([255, 0, 0]); // 9
// ANSI 256-color codes
convert.ansi256.rgb(196); // [255, 0, 0] (red from color cube)
convert.ansi256.rgb(244); // [128, 128, 128] (grayscale)
convert.rgb.ansi256([255, 0, 0]); // 196Flexible hexadecimal color parsing supporting multiple formats.
/**
* Hexadecimal color string support
*/
interface HEXColorSupport {
/**
* Supported formats:
* - 6-digit hex: "FF0000", "#FF0000"
* - 3-digit hex: "F00", "#F00" (expanded to "FF0000")
* - Case insensitive: "ff0000", "FF0000", "Ff0000"
*/
supportedFormats: string[];
/**
* Parsing behavior:
* - Strips # prefix if present
* - Expands 3-digit to 6-digit format
* - Returns null for invalid hex strings
*/
parsingBehavior: {
stripHashPrefix: boolean;
expand3To6Digit: boolean;
nullForInvalid: boolean;
};
}Usage Examples:
import convert from 'color-convert';
// Various hex formats
convert.hex.rgb('FF0000'); // [255, 0, 0]
convert.hex.rgb('#FF0000'); // [255, 0, 0]
convert.hex.rgb('F00'); // [255, 0, 0] (expanded)
convert.hex.rgb('#F00'); // [255, 0, 0] (expanded)
convert.hex.rgb('ff0000'); // [255, 0, 0] (case insensitive)
// RGB to hex
convert.rgb.hex([255, 0, 0]); // 'FF0000'
convert.rgb.hex(255, 0, 0); // 'FF0000'
// Invalid hex handling
convert.hex.rgb('invalid'); // null
convert.hex.rgb('GG0000'); // null