CSS Color Value Regex

Developer

Regular expression

/^(?:#[0-9a-fA-F]{3,8}|rgba?$[^)]*$|hsla?$[^)]*$|[a-zA-Z]+)$/

Pattern breakdown

Part	Meaning
`Anchor or context`	Use anchors when you need whole-string validation.
`Main token`	The core token sequence describes the accepted text shape.
`Character class`	Character classes limit which characters are valid.
`Quantifier`	Quantifiers control how many characters or groups are accepted.
`Flags`	Use language-specific flags such as i, m, or u only when needed.

Should match

rgba(255,0,0,.5)

Should not match

not a color?
not matching sample
rgba(255,0,0,.5) invalid
not a color?rgba(255,0,0,.5)

Test cases

Input	Expected	Why it matters
`rgba(255,0,0,.5)`	Match	Representative valid input for this pattern.
`not a color?`	No match	Common invalid or boundary input.
`(empty string)`	No match	Common invalid or boundary input.
`not matching sample`	No match	Common invalid or boundary input.
`rgba(255,0,0,.5) invalid`	No match	Common invalid or boundary input.
`not a color?rgba(255,0,0,.5)`	No match	Common invalid or boundary input.

JavaScript

const re = /^(?:#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|[a-zA-Z]+)$/;
re.test(input);

Python

import re
bool(re.search(r"^(?:#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|[a-zA-Z]+)$", text))

PHP

$ok = preg_match('/^(?:#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|[a-zA-Z]+)$/', $value) === 1;

Java

Pattern pattern = Pattern.compile("^(?:#[0-9a-fA-F]{3,8}|rgba?\\([^)]*\\)|hsla?\\([^)]*\\)|[a-zA-Z]+)$");
pattern.matcher(value).find();

Go

re := regexp.MustCompile(`^(?:#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|[a-zA-Z]+)$`)
ok := re.MatchString(value)

Notes and production use

CSS Color Value regex is useful as a practical starting point. Test it against your real input, avoid using it as the only security control, and prefer a parser when the format has complex grammar.

Performance tip: avoid running complex regular expressions repeatedly on very large untrusted strings without limits. Prefer anchored validation patterns, cap input length before matching, and use a parser when the target format has nested grammar.

CSS Color Value