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

JSSupported

JavaScript / ECMAScript

Browser-native RegExp. Default if you don't pick.

PYSupported

Python (re)

CPython stdlib `re`. Unicode-aware `\w` and `\d` by default.

GOSupported

Go (RE2)

Linear-time matching. No backreferences or lookarounds.

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

Related patterns

CSS rgb() Color

Web

Match CSS rgb() and rgba() color functions, including an optional alpha channel.

CSS Custom Property (Variable)

Web

Match CSS custom properties (variables) like `--brand-color` or `--font-size-lg`.

Hex Color Code

Web

Match CSS hex color codes in both 3-digit (#RGB) and 6-digit (#RRGGBB) formats.

HTML5 Color Input Value

Web

Validate the value of an HTML5 `<input type="color">` — exactly 6 hex digits with leading hash.

←PreviousIP Address with CIDR Notation
All patterns
NextBearer Token (Authorization Header)→