Function Signature

js

parseColor(input: string): ParsedColor

Parameters

input (string): The color string to parse. Leading and trailing spaces are trimmed automatically.

Supported Formats

#rgb and #rrggbb HEX colors.
#rgba and #rrggbbaa HEX alpha colors.
rgb(r,g,b) and rgba(r,g,b,a) comma syntax.
rgb(r g b / a) modern CSS syntax.
hsl(h,s%,l%) and hsla(h,s%,l%,a) comma syntax.
hsl(h s% l% / a) modern CSS syntax.
oklab(L a b / alpha) modern CSS OKLab syntax.
oklch(L C h / alpha) modern CSS OKLCH syntax.

Return Value

The function returns an object with a format field and a structured value payload.

js

parseColor("#ff6600");
// { format: "hex", value: "#ff6600" }

parseColor("#0afc");
// { format: "rgb", value: { r: 0, g: 170, b: 255, a: 0.8 } }

parseColor("rgb(255 102 0 / 50%)");
// { format: "rgb", value: { r: 255, g: 102, b: 0, a: 0.5 } }

parseColor("oklch(69.58% 0.2043 43.49 / 80%)");
// { format: "oklch", value: { L: 0.6958, C: 0.2043, h: 43.49, alpha: 0.8 } }

Examples

js

parseColor("rgba(0, 170, 255, 0.5)");
// { format: "rgb", value: { r: 0, g: 170, b: 255, a: 0.5 } }

parseColor("hsl(24 100% 50% / 0.75)");
// { format: "hsl", value: { h: 24, s: 100, l: 50, a: 0.75 } }

parseColor("oklab(69.58% 0.1482 0.1406)");
// { format: "oklab", value: { L: 0.6958, a: 0.1482, b: 0.1406, alpha: 1 } }

Error Handling

If the input string does not match any supported format, the function throws Unsupported color format.

Usage Notes

HEX values without alpha return format: "hex".
HEX alpha values return format: "rgb" with an alpha channel.
OKLab uses alpha for opacity because a is already a color-axis channel.
OKLCH lightness percentages are normalized to 0..1.