Color Conversion

/**
 * Get RGB values as array
 * @param rnd - Whether to round values to integers (default: true)
 * @returns Array of [r, g, b, a] where r,g,b are 0-255 and a is 0-1
 */
rgb(rnd?: boolean): number[];

/**
 * Alias for rgb() - returns RGBA values
 * @param rnd - Whether to round values to integers (default: true)
 * @returns Array of [r, g, b, a] where r,g,b are 0-255 and a is 0-1
 */
rgba(rnd?: boolean): number[];

import chroma from "chroma-js";

const color = chroma('#FF8040');
console.log(color.rgb()); // [255, 128, 64, 1]

const semiTransparent = chroma.rgba(255, 0, 0, 0.5);
console.log(semiTransparent.rgb()); // [255, 0, 0, 0.5]

// Destructure values
const [r, g, b, a] = color.rgb();

/**
 * Get hex string representation
 * @param mode - Format mode: 'auto' (default), 'rgb', 'rgba'
 * @returns Hex string (e.g., "#ff8040")
 */
hex(mode?: string): string;

const color = chroma.rgb(255, 128, 64);
console.log(color.hex()); // "#ff8040"

const red = chroma('#FF0000');
console.log(red.hex()); // "#ff0000"

// With transparency - uses 8-digit hex
const semiRed = chroma.rgba(255, 0, 0, 0.5);
console.log(semiRed.hex()); // "#ff000080"

/**
 * Get CSS string representation
 * @param mode - Format mode: 'auto' (default), 'rgb', 'rgba', 'hsl', 'hsla', 'lab', 'lch', 'oklab', 'oklch'
 * @returns CSS color string
 */
css(mode?: string): string;

const color = chroma('#FF8040');

// Default CSS format
console.log(color.css()); // "rgb(255 128 64)"

// Force RGB format
console.log(color.css('rgb')); // "rgb(255 128 64)"

// With transparency uses RGBA
const semiColor = color.alpha(0.7);
console.log(semiColor.css()); // "rgb(255 128 64 / 0.7)"
console.log(semiColor.css('rgba')); // "rgb(255 128 64 / 0.7)"

// HSL format
console.log(color.css('hsl')); // "hsl(20 100% 63%)"

// Modern CSS color spaces
console.log(color.css('lab')); // "lab(70.9% 26.9 57.6)"
console.log(color.css('lch')); // "lch(70.9% 64.2 65)"
console.log(color.css('oklab')); // "oklab(0.76 0.13 0.09)"
console.log(color.css('oklch')); // "oklch(0.76 0.16 35)"

/**
 * Get HSL values as array
 * @returns Array of [h, s, l, a] where h is 0-360, s and l are 0-1, a is 0-1
 */
hsl(): number[];

const red = chroma('#FF0000');
console.log(red.hsl()); // [0, 1, 0.5, 1]

const blue = chroma('#0000FF');
console.log(blue.hsl()); // [240, 1, 0.5, 1]

// Destructure values
const [hue, saturation, lightness, alpha] = red.hsl();

/**
 * Get HSV values as array
 * @returns Array of [h, s, v, a] where h is 0-360, s and v are 0-1, a is 0-1
 */
hsv(): number[];

const color = chroma('#FF8040');
console.log(color.hsv()); // [20, 0.75, 1, 1]

// Pure colors in HSV
const red = chroma('#FF0000');
console.log(red.hsv()); // [0, 1, 1, 1]

const green = chroma('#00FF00');
console.log(green.hsv()); // [120, 1, 1, 1]

/**
 * Get Lab values as array
 * @returns Array of [l, a, b, alpha] where l is 0-100, a and b are typically -128 to 127
 */
lab(): number[];

const red = chroma('#FF0000');
console.log(red.lab()); // [53.24, 80.09, 67.20, 1]

const white = chroma('#FFFFFF');
console.log(white.lab()); // [100, 0, 0, 1]

const black = chroma('#000000');
console.log(black.lab()); // [0, 0, 0, 1]

/**
 * Get LCH values as array
 * @returns Array of [l, c, h, alpha] where l is 0-100, c is 0-132+, h is 0-360
 */
lch(): number[];

/**
 * Alias for lch() - get HCL values (reverse order: H, C, L)
 * @returns Array of [h, c, l, alpha] where h is 0-360, c is 0-132+, l is 0-100
 */
hcl(): number[];

const red = chroma('#FF0000');
console.log(red.lch()); // [53.24, 104.55, 40.00, 1]

const blue = chroma('#0000FF');
console.log(blue.lch()); // [32.30, 133.81, 306.28, 1]

// LCH is useful for creating color scales with consistent perceived brightness
const [l, c, h] = red.lch();

/**
 * Get CMYK values as array
 * @returns Array of [c, m, y, k, a] where all values are 0-1
 */
cmyk(): number[];

const red = chroma('#FF0000');
console.log(red.cmyk()); // [0, 1, 1, 0, 1]

const cyan = chroma('#00FFFF');
console.log(cyan.cmyk()); // [1, 0, 0, 0, 1]

const black = chroma('#000000');
console.log(black.cmyk()); // [0, 0, 0, 1, 1]

// Useful for print design
const [c, m, y, k] = red.cmyk();
console.log(`C:${c*100}% M:${m*100}% Y:${y*100}% K:${k*100}%`);

/**
 * Get OpenGL normalized values
 * @returns Array of [r, g, b, a] where all values are 0-1
 */
gl(): number[];

const red = chroma('#FF0000');
console.log(red.gl()); // [1, 0, 0, 1]

const gray = chroma('#808080');
console.log(gray.gl()); // [0.502, 0.502, 0.502, 1]

// Use in WebGL/OpenGL contexts
const [r, g, b, a] = red.gl();
// gl.uniform4f(colorLocation, r, g, b, a);

/**
 * Get color temperature in Kelvin
 * @returns Temperature in Kelvin (approximate)
 */
temp(): number;

/**
 * Alias for temp()
 */
kelvin(): number;

/**
 * Alias for temp()
 */
temperature(): number;

// Get temperature of existing colors
const warm = chroma('#FFA500');
console.log(warm.temp()); // ~2000K (warm light)

const cool = chroma('#87CEEB');
console.log(cool.temp()); // ~6500K (cool daylight)

// Create from temperature
const candleLight = chroma.temp(1900);
const sunlight = chroma.temp(5500);
const skyLight = chroma.temp(10000);

/**
 * Get numeric representation
 * @returns Number representing the color (24-bit RGB)
 */
num(): number;

const red = chroma('#FF0000');
console.log(red.num()); // 16711680 (0xFF0000)

const blue = chroma('#0000FF');
console.log(blue.num()); // 255 (0x0000FF)

// Convert back
const fromNum = chroma.num(16711680);
console.log(fromNum.hex()); // "#ff0000"

/**
 * Get HSI (Hue, Saturation, Intensity) values
 * @returns Array of [h, s, i, a]
 */
hsi(): number[];

/**
 * Get HCG (Hue, Chroma, Grayness) values
 * @returns Array of [h, c, g, a]
 */
hcg(): number[];

/**
 * Get OKLab values (modern perceptually uniform color space)
 * @returns Array of [l, a, b, alpha]
 */
oklab(): number[];

/**
 * Get OKLCH values (cylindrical OKLab)
 * @returns Array of [l, c, h, alpha]
 */
oklch(): number[];

const color = chroma('#FF8040');

// HSI color space
console.log(color.hsi()); // [20, 0.75, 0.67, 1]

// HCG color space
console.log(color.hcg()); // [20, 0.75, 0.25, 1]

// Modern OKLab color space (better perceptual uniformity)
console.log(color.oklab()); // [0.76, 0.13, 0.09, 1]

// OKLCH (cylindrical OKLab)
console.log(color.oklch()); // [0.76, 0.16, 35, 1]

/**
 * String representation of the color
 * @returns String representation (hex format if available, otherwise RGB array)
 */
toString(): string;

const red = chroma('#FF0000');
console.log(red.toString()); // "#ff0000"

const complex = chroma.lab(50, 20, -30);
console.log(complex.toString()); // "[123,45,67,1]" (RGB fallback)

// Implicit string conversion
console.log(`Color: ${red}`); // "Color: #ff0000"

/**
 * Get current LAB white point illuminant
 * @returns Current illuminant name (e.g., 'd65', 'd50')
 */
function getLabWhitePoint(): string;

/**
 * Set LAB white point illuminant
 * @param name - Illuminant name: 'a', 'b', 'c', 'd50', 'd55', 'd65' (default), 'e', 'f2', 'f7', 'f11', 'icc'
 */
function setLabWhitePoint(name: string): void;

import chroma, { getLabWhitePoint, setLabWhitePoint } from "chroma-js";

// Check current white point
console.log(getLabWhitePoint()); // "d65" (default)

// Switch to D50 for better CSS Lab compatibility
setLabWhitePoint('d50');
const color = chroma.lab(70, 20, 30);
console.log(color.css('lab')); // Uses D50 white point

// Switch back to D65
setLabWhitePoint('d65');

// Different illuminants affect Lab conversion
const red = chroma('#FF0000');
setLabWhitePoint('d65');
console.log(red.lab()); // [53.24, 80.09, 67.20, 1]

setLabWhitePoint('d50');
console.log(red.lab()); // [54.29, 80.81, 69.89, 1]