Core color construction capabilities providing multiple ways to create Color instances from various input formats with automatic format detection and explicit format constructors.
Creates Color instances from any supported format with automatic format detection.
/**
* Main constructor with automatic format detection
* @param args - Color values in any supported format
* @returns Color instance
*/
function chroma(...args: any[]): Color;Usage Examples:
import chroma from "chroma-js";
// From hex strings
const red = chroma('#FF0000');
const blue = chroma('#0000FF');
// From named colors
const green = chroma('green');
const yellow = chroma('yellow');
// From RGB values
const purple = chroma(128, 0, 128);
const orange = chroma(255, 165, 0);
// From RGB array
const cyan = chroma([0, 255, 255]);
// From object
const magenta = chroma({r: 255, g: 0, b: 255});Creates colors from RGB (Red, Green, Blue) values with optional alpha channel.
/**
* Create color from RGB values
* @param r - Red component (0-255)
* @param g - Green component (0-255)
* @param b - Blue component (0-255)
* @param a - Alpha component (0-1), optional
* @returns Color instance
*/
function chroma.rgb(r: number, g: number, b: number, a?: number): Color;Usage Examples:
// Basic RGB
const red = chroma.rgb(255, 0, 0);
const blue = chroma.rgb(0, 0, 255);
// RGB with alpha
const semiRed = chroma.rgb(255, 0, 0, 0.5);Creates colors from hexadecimal color strings.
/**
* Create color from hex string
* @param hex - Hex color string (e.g., "#FF0000", "#F00", "FF0000")
* @returns Color instance
*/
function chroma.hex(hex: string): Color;Usage Examples:
// 6-digit hex
const red = chroma.hex('#FF0000');
const blue = chroma.hex('#0000FF');
// 3-digit hex
const green = chroma.hex('#0F0');
// Without hash
const purple = chroma.hex('800080');Creates colors from HSL (Hue, Saturation, Lightness) values.
/**
* Create color from HSL values
* @param h - Hue (0-360 degrees)
* @param s - Saturation (0-1)
* @param l - Lightness (0-1)
* @returns Color instance
*/
function chroma.hsl(h: number, s: number, l: number): Color;Usage Examples:
// Pure red
const red = chroma.hsl(0, 1, 0.5);
// Pure blue
const blue = chroma.hsl(240, 1, 0.5);
// Desaturated color
const gray = chroma.hsl(0, 0, 0.5);Creates colors from HSV (Hue, Saturation, Value) values.
/**
* Create color from HSV values
* @param h - Hue (0-360 degrees)
* @param s - Saturation (0-1)
* @param v - Value/Brightness (0-1)
* @returns Color instance
*/
function chroma.hsv(h: number, s: number, v: number): Color;Usage Examples:
// Bright red
const red = chroma.hsv(0, 1, 1);
// Dark blue
const darkBlue = chroma.hsv(240, 1, 0.5);Creates colors from Lab (Lightness, a*, b*) color space values.
/**
* Create color from Lab values
* @param l - Lightness (0-100)
* @param a - Green-Red axis (-128 to 127)
* @param b - Blue-Yellow axis (-128 to 127)
* @returns Color instance
*/
function chroma.lab(l: number, a: number, b: number): Color;Usage Examples:
// White
const white = chroma.lab(100, 0, 0);
// Pure red in Lab space
const red = chroma.lab(53, 80, 67);Creates colors from LCH (Lightness, Chroma, Hue) values.
/**
* Create color from LCH values
* @param l - Lightness (0-100)
* @param c - Chroma (0-132+)
* @param h - Hue (0-360 degrees)
* @returns Color instance
*/
function chroma.lch(l: number, c: number, h: number): Color;
/**
* Alias for lch() - create color from HCL values (reverse order: H, C, L)
* @param h - Hue (0-360 degrees)
* @param c - Chroma (0-132+)
* @param l - Lightness (0-100)
* @returns Color instance
*/
function chroma.hcl(h: number, c: number, l: number): Color;Usage Examples:
// Vivid red
const red = chroma.lch(50, 70, 0);
// Vivid blue
const blue = chroma.lch(50, 70, 240);Creates colors from CMYK (Cyan, Magenta, Yellow, Key/Black) values.
/**
* Create color from CMYK values
* @param c - Cyan (0-1)
* @param m - Magenta (0-1)
* @param y - Yellow (0-1)
* @param k - Key/Black (0-1)
* @returns Color instance
*/
function chroma.cmyk(c: number, m: number, y: number, k: number): Color;Usage Examples:
// Pure red in CMYK
const red = chroma.cmyk(0, 1, 1, 0);
// Pure cyan
const cyan = chroma.cmyk(1, 0, 0, 0);Creates colors from OpenGL normalized RGB values (0-1 range).
/**
* Create color from OpenGL normalized values
* @param r - Red component (0-1)
* @param g - Green component (0-1)
* @param b - Blue component (0-1)
* @param a - Alpha component (0-1), optional
* @returns Color instance
*/
function chroma.gl(r: number, g: number, b: number, a?: number): Color;Usage Examples:
// Pure red
const red = chroma.gl(1, 0, 0);
// Semi-transparent blue
const semiBlue = chroma.gl(0, 0, 1, 0.5);Creates colors from color temperature in Kelvin.
/**
* Create color from temperature in Kelvin
* @param temperature - Temperature in Kelvin (1000-30000)
* @returns Color instance
*/
function chroma.temp(temperature: number): Color;
function chroma.kelvin(temperature: number): Color;
function chroma.temperature(temperature: number): Color;Usage Examples:
// Warm light (2700K)
const warm = chroma.temp(2700);
// Cool daylight (6500K)
const daylight = chroma.temp(6500);
// Candle light (1900K)
const candle = chroma.kelvin(1900);Creates colors from CSS color strings.
/**
* Create color from CSS string
* @param css - CSS color string (rgb(), hsl(), named colors, etc.)
* @returns Color instance
*/
function chroma.css(css: string): Color;Usage Examples:
// RGB function
const red = chroma.css('rgb(255, 0, 0)');
// RGBA function
const semiRed = chroma.css('rgba(255, 0, 0, 0.5)');
// HSL function
const blue = chroma.css('hsl(240, 100%, 50%)');
// Named color
const green = chroma.css('green');Additional specialized constructors for specific color spaces.
// HSI (Hue, Saturation, Intensity)
function chroma.hsi(h: number, s: number, i: number): Color;
// HCG (Hue, Chroma, Grayness)
function chroma.hcg(h: number, c: number, g: number): Color;
// OKLab color space
function chroma.oklab(l: number, a: number, b: number): Color;
// OKLCH color space
function chroma.oklch(l: number, c: number, h: number): Color;
// Numeric representation
function chroma.num(num: number): Color;Usage Examples:
// HSI color
const color1 = chroma.hsi(120, 0.5, 0.7);
// HCG color
const color2 = chroma.hcg(240, 0.8, 0.2);
// OKLab color (modern perceptually uniform color space)
const color3 = chroma.oklab(0.7, 0.1, 0.05);
// From numeric value
const color4 = chroma.num(0xFF0000); // Red