Webflags: gi

CSS hsl() / hsla() Color

Match CSS hsl() and hsla() color functions, capturing hue (0–360), saturation, lightness, and optional alpha.

Available in

JavaScript / ECMAScript code

jsJavaScript

const re = new RegExp("hsla?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})%\\s*,\\s*(\\d{1,3})%(?:\\s*,\\s*(?:0|1|0?\\.\\d+))?\\s*\\)", "gi");
const input = "hsl(200, 100%, 50%)";
const matches = [...input.matchAll(re)];
console.log(matches.map(m => m[0]));

Uses `String.prototype.matchAll` for global iteration (Node 12+ / all modern browsers).

Python (re) code

pyPython

import re

pattern = re.compile(r"hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\)", re.IGNORECASE)
input_text = "hsl(200, 100%, 50%)"
for m in pattern.finditer(input_text):
    print(m.group(0))

Stdlib `re` module — no third-party dependency. Works on Python 3.6+.

Go (RE2) code

goGo

package main

import (
	"fmt"
	"regexp"
)

func main() {
	re := regexp.MustCompile(`(?i)hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\)`)
	input := `hsl(200, 100%, 50%)`
	for _, match := range re.FindAllString(input, -1) {
		fmt.Println(match)
	}
}

Uses `regexp.MustCompile` (panics on bad patterns at startup) and `FindAllString` for all matches.

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.