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

A valid matching string is "rgba(16, 185, 129, 0.85)". A non-matching string is "rgb(300, 0, 0)".

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 RGB / RGBA Color Function Regex

100% Client-Side • 0 B Data Leaves Browser

formatting

CSS RGB / RGBA Color Function Regex

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

Use regex.test(): const regex = /^rgba?$\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?$$/i; const isValid = regex.test(inputString);

Matches valid CSS rgb(255, 255, 255) and rgba(0, 0, 0, 0.5) declarations restricting channels to 0-255.

Regular Expression Pattern:

/^rgba?$\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?$$/i

Valid Match Example:

rgba(16, 185, 129, 0.85)

Invalid / Non-Match Example:

rgb(300, 0, 0)

Regex Syntax Breakdown & Explanation

•^rgba? : Matches rgb or rgba function declaration
•(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d) : Ensures each R, G, B channel falls within valid 0 to 255 boundary
•(?:,\s*(?:0|1|0?\.\d+))? : Optional alpha transparency channel (0.0 to 1.0)

Implementation in Popular Languages

JavaScript / TypeScript

const regex = /^rgba?\(\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\)$/i;
const isValid = regex.test("rgba(16, 185, 129, 0.85)");
console.log(isValid); // true

Python (re)

import re

pattern = r"^rgba?\(\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\)$"
match = re.match(pattern, "rgba(16, 185, 129, 0.85)")
print(bool(match)) # True

Go (regexp)

package main
import (
  "fmt"
  "regexp"
)

func main() {
  re := regexp.MustCompile(`^rgba?\(\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\)$`)
  fmt.Println(re.MatchString("rgba(16, 185, 129, 0.85)"))
}

Frequently Asked Questions

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

The regular expression pattern is /^rgba?$\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*,\s*(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?$$/i. Matches valid CSS rgb(255, 255, 255) and rgba(0, 0, 0, 0.5) declarations restricting channels to 0-255.