Color conversion and manipulation with CSS string support
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Comprehensive color construction capabilities supporting multiple input formats and color models for creating Color instances.
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);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});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});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;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;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;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;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;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;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;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;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;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 formatSupports all CSS color string formats via the color-string library:
#FF0000, #F00, #FF000080 (with alpha)rgb(255, 0, 0), rgba(255, 0, 0, 0.5)hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.8)red, blue, lightsteelblue, etc.rgb(100%, 0%, 0%)Color channel objects with appropriate property names:
{r: 255, g: 0, b: 0, alpha?: 0.5}{h: 120, s: 100, l: 50, alpha?: 0.8}{h: 240, s: 100, v: 100}{c: 0, m: 100, y: 100, k: 0}Numeric arrays with values in model-specific ranges:
[255, 0, 0] or [255, 0, 0, 0.5][120, 100, 50] or [120, 100, 50, 0.8]Single numeric value interpreted as RGB:
0xFF0000 → RGB(255, 0, 0) (red)0x00FF00 → RGB(0, 255, 0) (green)