Pattern

Regex for CSS hsl() / hsla() color

CSS hsl/hsla color value.

The CSS hsl() / hsla() color regex is ^hsla?$\s*\d+(deg)?\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*(0|1|0?\.\d+)\s*)?$$ — copy it below, or open it in the explainer for a token-by-token breakdown.

The pattern

^hsla?$\s*\d+(deg)?\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*(0|1|0?\.\d+)\s*)?$$

Open in explainer → Download cheat sheet ↓

Token-by-token breakdown

Every part of the pattern, left to right:

Token	Meaning
`^`	start of string (or line in multiline mode)
`hsl`	literal text “hsl”
`a?`	optional (zero or one): the literal “a”
`\(`	literal “(”
`\s*`	zero or more: whitespace
`\d+`	one or more: digit (0–9)
`(`	start of a capturing group
`deg`	literal text “deg”
`)?`	end of group, optional (zero or one)
`\s*`	zero or more: whitespace
`,`	literal text “,”
`\s*`	zero or more: whitespace
`\d+`	one or more: digit (0–9)
`%`	literal text “%”
`\s*`	zero or more: whitespace
`,`	literal text “,”
`\s*`	zero or more: whitespace
`\d+`	one or more: digit (0–9)
`%`	literal text “%”
`\s*`	zero or more: whitespace
`(`	start of a capturing group
`,`	literal text “,”
`\s*`	zero or more: whitespace
`(`	start of a capturing group
`0`	literal text “0”
`\|`	OR — try the alternative
`1`	literal text “1”
`\|`	OR — try the alternative
`0?`	optional (zero or one): the literal “0”
`\.`	literal “.”
`\d+`	one or more: digit (0–9)
`)`	end of group
`\s*`	zero or more: whitespace
`)?`	end of group, optional (zero or one)
`\)`	literal “)”
`$`	end of string (or line in multiline mode)

About this pattern

Identifier formats like UUIDs, hashes, and version strings have well-defined structures that regex captures cleanly. The pattern verifies format; checksums and validity against a registry need additional checks.

Quick usage in different languages

This exact pattern — with the correct escaping and idioms for each language:

JavaScript: /^hsla?$\s*\d+(deg)?\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*(0|1|0?\.\d+)\s*)?$$/.test(value)
Python: re.match(r"^hsla?$\s*\d+(deg)?\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*(0|1|0?\.\d+)\s*)?$$", value)
Java: Pattern.compile("^hsla?\$\\s*\\d+(deg)?\\s*,\\s*\\d+%\\s*,\\s*\\d+%\\s*(,\\s*(0|1|0?\\.\\d+)\\s*)?\$$").matcher(value).matches()
C# / .NET: Regex.IsMatch(value, @"^hsla?$\s*\d+(deg)?\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*(0|1|0?\.\d+)\s*)?$$")
Go: regexp.MustCompile(`^hsla?$\s*\d+(deg)?\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*(0|1|0?\.\d+)\s*)?$$`).MatchString(value)
Ruby: /^hsla?$\s*\d+(deg)?\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*(0|1|0?\.\d+)\s*)?$$/.match?(value)
PHP: preg_match('~^hsla?$\s*\d+(deg)?\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*(0|1|0?\.\d+)\s*)?$$~', $value)

The explainer’s Code tab regenerates these for any pattern you paste, and the downloadable cheat sheet bundles the breakdown, all seven snippets, and the pitfalls below onto one printable page.

Common pitfalls

Anchored to the whole string. This pattern uses ^ and $, so it requires the entire input to match. To find it inside a longer text, drop the anchors and use the global (g) flag.
Escape it correctly per language. In Java and JavaScript strings each backslash must be doubled (\\d); in Python, Go, and C# use raw/verbatim strings so the backslashes survive.
Validate beyond format. Matching the format doesn't guarantee the value is real. Confirm the css hsl() / hsla() color against a source of truth (database, API, or checksum) where it matters.

Standards & sources

This pattern is based on the following authoritative specification(s) and issuing authorities. Formats can change — always confirm against the primary source.

W3C CSS Color Module Level 4

Related patterns

More patterns in the Codes & IDs category: