Detection & Parsing
Detection
| Function | Description |
|---|---|
getColorType(value) | Returns 'hex' | 'css-var' | 'rgb' | 'hsl' | 'named' | 'oklch' | 'color' | 'unknown' |
isHexColor(value) | Detects 3-, 4-, or 6-digit hex strings (with or without #) |
isRgbColor(value) | Detects rgb() / rgba() strings |
isHslColor(value) | Detects hsl() / hsla() strings |
isOklchColor(value) | Detects oklch() / oklcha() strings |
isColorFunction(value) | Detects color(display-p3 ...), color(srgb ...), color(srgb-linear ...) strings |
isCssVariable(value) | Checks for var(--name) pattern |
extractCssVariableName(value) | Extracts --name from var(--name, fallback) |
Parsing & Normalization
| Function | Description |
|---|---|
normalizeColor(input) | Universal parser. Accepts hex (3/4/6/8-digit), rgb(), hsl(), hwb(), oklch(), color(), named color, {r,g,b} object, {h,s,l} object. Returns { type, hex, r, g, b, a, h, s, l, v } |
normalizeColorCached(input) | Same as normalizeColor but uses an internal LRU-style cache. String input only |
normalizeHex(hex) | Normalizes 3- or 6-digit hex to lowercase 6-digit with # |
rgbaStringToRgba(str) | Parses rgb() / rgba() string to {r, g, b, a}; supports percentage channels |
hex8ToRgba(hex) | Parses 8-digit hex (#rrggbbaa) or 4-digit hex (#rgba) to {r, g, b, a} |
shortHexToRgba(hex) | Parses 4-digit hex (#rgba) to {r, g, b, a} — e.g. #f0f0 → {r:255,g:0,b:255,a:0} |
parseHwbString(str) | Parses hwb() string to {H, W, B, alpha} |
parseOklchString(str) | Parses oklch(L C H / alpha) to {L, C, H, alpha}; accepts percentage L |
parseColorFn(str) | Parses color(display-p3 r g b / alpha) to {space, r, g, b, alpha} |
parseCssVar(value) | Parses var(--name, fallback) to {variableName, fallback?} |
normalizeColor return value
ts
{
type: 'hex' | 'rgb' | 'hsl' | 'oklch' | 'color' | 'named' | 'css-var' | 'unknown'
hex?: string // '#rrggbb'
r?: number // 0–255
g?: number // 0–255
b?: number // 0–255
a?: number // 0–1
h?: number // hue 0–360
s?: number // HSL saturation 0–100
l?: number // HSL lightness 0–100
v?: number // HSV value 0–100
raw?: string // set for css-var type
}ts
// Object input
normalizeColor({ r: 52, g: 152, b: 219 }) // → full result with hex, h, s, l, v
normalizeColor({ h: 204, s: 70, l: 53 }) // → full result with hex, r, g, b, v
// CSS variable — returns raw, no color channels
normalizeColor('var(--brand-color)') // → { type: 'css-var', raw: 'var(--brand-color)' }