Launching a SaaS?·Collect waitlist signups before you build — before.run
/./
regex.to
SandboxPatternsDetectDocs
Design
#hsl
#color
#css
#design

HSL Color

Matches a CSS HSL color value in the format hsl(H, S%, L%).

✓ CSS value parsing✓ Theme generators✓ Color pickers
/
/
Test String
3 matches
hh— 'h' — literal character
ss— 's' — literal character
ll— 'l' — literal character
\(\(— \( — escaped character '('
\s*space— \s — whitespace (space, tab, newline…) — repeated zero or more times (greedy) · * — zero or more times (greedy)
(…)Group #1— Capturing group — captures matched text for reuse or extraction
33— '3' — literal character
66— '6' — literal character
00— '0' — literal character
||— | — alternation: matches expression on left OR right
33— '3' — literal character
[…]Character class […]— Matches any single character listed in this set
\ddigit— \d — digit (0–9)
||— | — alternation: matches expression on left OR right
[…]Character class […]— Matches any single character listed in this set
\d{2}digit— \d — digit (0–9) — repeated exactly 2 times · {2} — exactly 2 times
||— | — alternation: matches expression on left OR right
[…]Character class […]— Matches any single character listed in this set
\ddigit— \d — digit (0–9)
||— | — alternation: matches expression on left OR right
\ddigit— \d — digit (0–9)
\s*space— \s — whitespace (space, tab, newline…) — repeated zero or more times (greedy) · * — zero or more times (greedy)
,,— ',' — literal character
\s*space— \s — whitespace (space, tab, newline…) — repeated zero or more times (greedy) · * — zero or more times (greedy)
(…)Group #2— Capturing group — captures matched text for reuse or extraction
11— '1' — literal character
00— '0' — literal character
00— '0' — literal character
||— | — alternation: matches expression on left OR right
[…]Character class […]— Matches any single character listed in this set
\ddigit— \d — digit (0–9)
||— | — alternation: matches expression on left OR right
\ddigit— \d — digit (0–9)
%%— '%' — literal character
\s*space— \s — whitespace (space, tab, newline…) — repeated zero or more times (greedy) · * — zero or more times (greedy)
,,— ',' — literal character
\s*space— \s — whitespace (space, tab, newline…) — repeated zero or more times (greedy) · * — zero or more times (greedy)
(…)Group #3— Capturing group — captures matched text for reuse or extraction
11— '1' — literal character
00— '0' — literal character
00— '0' — literal character
||— | — alternation: matches expression on left OR right
[…]Character class […]— Matches any single character listed in this set
\ddigit— \d — digit (0–9)
||— | — alternation: matches expression on left OR right
\ddigit— \d — digit (0–9)
%%— '%' — literal character
\s*space— \s — whitespace (space, tab, newline…) — repeated zero or more times (greedy) · * — zero or more times (greedy)
\)\)— \) — escaped character ')'
Pattern: 96 charsInput: 54 chars
100% client-side · private

✓ Valid Examples

  • hsl(0, 100%, 50%)
  • hsl(142, 70%, 55%)
  • hsl(224, 10%, 9%)

✗ Invalid Examples

  • hsl(361, 100%, 50%)
  • hsl(0, 101%, 50%)
  • rgb(255, 0, 0)