Code & Markup · In-Browser Regular Expression Lab

RGB / RGBA Regex — Validate CSS Functional Color Syntax

Matches CSS rgb(r, g, b) and rgba(r, g, b, a) expressions with values between 0 and 255.

Pattern:

Regular Expression Pattern & Flags

Flags:

//i

Live Test String

Match Found

Load Sample:

Match Inspection & Details1 match

Match #1:rgb(255, 0, 128)

Test Samples Verification Matrix

Expected Valid Samples (Should Match)

rgb(255, 0, 128) Pass

rgba(59, 130, 246, 0.5) Pass

rgb(0,0,0) Pass

Expected Invalid Samples (Must Reject)

rgb(256, 0, 0) Rejected (Pass)

rgba(1, 2) Rejected (Pass)

rgb(100, 200, 300) Rejected (Pass)

Code Implementation Generator

// JavaScript / TypeScript (ES6+)
const pattern = /^rgba?\(\s*(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\s*,\s*(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\s*,\s*(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\)$/i;
const text = "rgb(255, 0, 128)";

const isMatch = pattern.test(text);
console.log("Is Match:", isMatch);

if (isMatch) {
  const matches = text.match(pattern);
  console.log("Matches:", matches);
}

Regular Expression Token Breakdown

Checks 3 channels (0-255) and an optional alpha transparency channel (0.0 - 1.0). Each component of the regular expression serves a distinct syntactical purpose as mapped below:

Token Pattern	Name / Component	Function & Rule
^rgba?\(	Function name	Matches rgb( or rgba(.
25[0-5]\|...	Color channels	Ensures R, G, B are strictly within 0 to 255.
(?:,\s*(?:0\|1\|0?\.\d+))?	Optional Alpha	Validates floating point alpha between 0 and 1.