VueCraft NPM

Detection & Parsing ​

Detection ​

getColorType(value) ​

ColorType — 'hex' | 'css-var' | 'rgb' | 'hsl' | 'named' | 'oklch' | 'color' | 'unknown'

Detects which format a color string is written in, without parsing it into components.

isHexColor(value) ​

boolean

Detects 3-, 4-, or 6-digit hex strings, with or without a leading #.

isRgbColor(value) ​

boolean

Detects rgb(...) / rgba(...) strings.

isHslColor(value) ​

boolean

Detects hsl(...) / hsla(...) strings.

isOklchColor(value) ​

boolean

Detects oklch(...) / oklcha(...) strings.

isColorFunction(value) ​

boolean

Detects color(display-p3 ...), color(srgb ...), and color(srgb-linear ...) strings.

isCssVariable(value) ​

boolean

Checks whether the string starts with var(--.

extractCssVariableName(value) ​

string — the --name part, or the original value unchanged if it doesn't match a var(...) pattern

Pulls the custom-property name out of a CSS var() reference — var(--name) or var(--name, fallback).

Parsing & Normalization ​

normalizeColor(input) ​

See the return value shape below.

Accepts hex (3/4/6/8-digit), rgb(), hsl(), hwb(), oklch(), color(), a CSS named color, or a plain {r,g,b}/{h,s,l} object. The universal entry point — every manipulation, harmony, mixing, and accessibility function in the package funnels through this to accept any input format.

normalizeColorCached(input) ​

Same shape as normalizeColor's return value.

Same as normalizeColor, but limited to string input and memoizes results in an in-memory cache — see Cache.

normalizeHex(hex) ​

string — a lowercase 6-digit #rrggbb string; falls back to #f5e477 when the input isn't a valid hex color

Normalizes hex-color shorthand (3- or 6-digit, with or without #) into a canonical 6-digit form.

rgbaStringToRgba(str) ​

{ r, g, b, a } | null

Parses a CSS rgb()/rgba() string into components; channels may be percentages.

hex8ToRgba(hex) ​

{ r, g, b, a } | null

Parses a hex color that includes an alpha channel — an 8-digit (#rrggbbaa) or 4-digit (#rgba) hex color.

shortHexToRgba(hex) ​

{ r, g, b, a } | null — e.g. #f0f0 → { r: 255, g: 0, b: 255, a: 0 }

Parses 4-digit hex shorthand specifically (see also hex8ToRgba, which accepts both 4- and 8-digit forms).

parseHwbString(str) ​

{ H, W, B, alpha } | null

Parses a CSS hwb() string into hue/whiteness/blackness components.

parseOklchString(str) ​

{ L, C, H, alpha } | null

Parses a CSS oklch() string — oklch(L C H) or oklch(L C H / alpha), L may be a percentage — into components.

parseColorFn(str) ​

{ space, r, g, b, alpha } | null

Parses a CSS color(...) function string — color(display-p3 r g b) or color(srgb r g b / alpha) — into its color space and components.

parseCssVar(value) ​

{ variableName, fallback? } | null

Parses a CSS custom-property reference — var(--name) or var(--name, fallback) — into its name and optional 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)' }