Webflags: gi
CSS hsl() / hsla() Color
Match CSS hsl() and hsla() color functions, capturing hue (0–360), saturation, lightness, and optional alpha.
Try it in RegexPro →Available in
Pattern
regexengine-agnostic
hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\) (flags: gi)Raw source: hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\)
How it 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
—Common use cases
- •CSS/SCSS color extraction and transformation
- •Design token migration from hsl to hex
- •Theme contrast ratio analysis
- •Color picker widget parsing