Skip to content

Detection & Parsing

Detection

FunctionDescription
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

FunctionDescription
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)' }