What is an example of a matching and non-matching string?

A valid matching string is "hsl(142, 70%, 45%)". A non-matching string is "hsl(400, 50%, 50%)".

Is this regex safe from ReDoS (Catastrophic Backtracking)?

Yes, this pattern is optimized for linear execution time and safe for browser-side validation without locking up the UI thread.

HomeRegex LibraryCSS HSL / HSLA Color Function Regex

100% Client-Side • 0 B Data Leaves Browser

formatting

CSS HSL / HSLA Color Function Regex

Q: How do I test this regex in JavaScript and TypeScript?

Use regex.test(): const regex = /^hsla?$\s*(?:360|3[0-5]\d|[12]?\d{1,2})\s*,\s*(?:100|[1-9]?\d)%\s*,\s*(?:100|[1-9]?\d)%\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?$$/i; const isValid = regex.test(inputString);

Validates CSS hsl() and hsla() syntax, clamping hue to 0-360 and saturation/lightness to 0%-100%.

Regular Expression Pattern:

/^hsla?$\s*(?:360|3[0-5]\d|[12]?\d{1,2})\s*,\s*(?:100|[1-9]?\d)%\s*,\s*(?:100|[1-9]?\d)%\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?$$/i

Valid Match Example:

hsl(142, 70%, 45%)

Invalid / Non-Match Example:

hsl(400, 50%, 50%)

Regex Syntax Breakdown & Explanation

•(?:360|3[0-5]\d|[12]?\d{1,2}) : Validates hue angle from 0 to 360 degrees
•(?:100|[1-9]?\d)% : Validates percentage values 0% to 100% for saturation and lightness
•Optional alpha channel for hsla

Implementation in Popular Languages

JavaScript / TypeScript

const regex = /^hsla?\(\s*(?:360|3[0-5]\d|[12]?\d{1,2})\s*,\s*(?:100|[1-9]?\d)%\s*,\s*(?:100|[1-9]?\d)%\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\)$/i;
const isValid = regex.test("hsl(142, 70%, 45%)");
console.log(isValid); // true

Python (re)

import re

pattern = r"^hsla?\(\s*(?:360|3[0-5]\d|[12]?\d{1,2})\s*,\s*(?:100|[1-9]?\d)%\s*,\s*(?:100|[1-9]?\d)%\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\)$"
match = re.match(pattern, "hsl(142, 70%, 45%)")
print(bool(match)) # True

Go (regexp)

package main
import (
  "fmt"
  "regexp"
)

func main() {
  re := regexp.MustCompile(`^hsla?\(\s*(?:360|3[0-5]\d|[12]?\d{1,2})\s*,\s*(?:100|[1-9]?\d)%\s*,\s*(?:100|[1-9]?\d)%\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\)$`)
  fmt.Println(re.MatchString("hsl(142, 70%, 45%)"))
}

Frequently Asked Questions

Everything you need to know regarding specifications, syntax, and security best practices.

The regular expression pattern is /^hsla?$\s*(?:360|3[0-5]\d|[12]?\d{1,2})\s*,\s*(?:100|[1-9]?\d)%\s*,\s*(?:100|[1-9]?\d)%\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?$$/i. Validates CSS hsl() and hsla() syntax, clamping hue to 0-360 and saturation/lightness to 0%-100%.