Launching a SaaS?·Collect waitlist signups before you build — before.run
regex.to logoregex.to
SandboxPatternsDetectDocsChangelog
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
/
/
Risk
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)

Usage & Integration

Validate HSL Color natively in your backend or frontend without copying regex strings.

Node / Edge

import { validate } from '@regexto/validators';

validate('hsl-color', '...');

Python

from regexto_validators import validate

validate("hsl-color", "...")

Go

import "github.com/regex-to/validators-go"

valid, err := validators.Validate("hsl-color", "...")

PHP

use RegexTo\Validators\Validator;

Validator::validate('hsl-color', '...');

Rust

use regexto_validators::validate;

let is_valid = validate("hsl-color", "...").unwrap();