CSS hsl() / hsla() Color in JS
Match CSS hsl() and hsla() color functions, capturing hue (0–360), saturation, lightness, and optional alpha.
Try it in the JS tester →Pattern
regexJS
hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\) (flags: gi)JavaScript / ECMAScript code
jsJavaScript
const re = new RegExp("hsla?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})%\\s*,\\s*(\\d{1,3})%(?:\\s*,\\s*(?:0|1|0?\\.\\d+))?\\s*\\)", "gi");
const input = "hsl(200, 100%, 50%)";
const matches = [...input.matchAll(re)];
console.log(matches.map(m => m[0]));Uses `String.prototype.matchAll` for global iteration (Node 12+ / all modern browsers).
How the pattern works
hsla? matches hsl or hsla. The three numeric groups capture hue (degrees), saturation %, and lightness %. The optional fourth group captures an alpha value of 0, 1, or a decimal like 0.75. Whitespace is allowed around all values.
Examples
Input
hsl(200, 100%, 50%)Matches
hsl(200, 100%, 50%)
Input
hsla(120, 60%, 70%, 0.8)Matches
hsla(120, 60%, 70%, 0.8)
Input
color: blue;No match
—