Code & Markup · In-Browser Regular Expression Lab
Hex Color Regex — 3, 6, and 8-Digit Hex CSS Colors with Hash
Matches CSS hex colors in #RGB, #RRGGBB, and #RRGGBBAA (with alpha transparency) formats.
Flags:
//none
Match Found
Load Sample:
Match Inspection & Details1 match
Match #1:#ffffff
Test Samples Verification Matrix
Expected Valid Samples (Should Match)
#ffffff Pass
#3B82F6 Pass
#fff Pass
#10b98180 Pass
Expected Invalid Samples (Must Reject)
ffffff Rejected (Pass)
#ffff Rejected (Pass)
#1234567 Rejected (Pass)
#zzzzzz Rejected (Pass)
Code Implementation Generator
// JavaScript / TypeScript (ES6+)
const pattern = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
const text = "#ffffff";
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
Matches leading # followed by 3, 6, or 8 hexadecimal digits. Each component of the regular expression serves a distinct syntactical purpose as mapped below:
| Token Pattern | Name / Component | Function & Rule |
|---|---|---|
| ^# | Hash Prefix | Literal # symbol. |
| [0-9a-fA-F]{3} | 3-digit shorthand | e.g., #fff for #ffffff. |
| [0-9a-fA-F]{6} | 6-digit standard | Full red, green, blue channels. |
| [0-9a-fA-F]{8} | 8-digit with Alpha | Adds 2-digit alpha channel for opacity. |
Frequently Asked Questions
How to make the # optional?
Related Regular Expressions
Browse All 40 PatternsCode & Markup
RGB & RGBA CSS Color
Matches CSS rgb(r, g, b) and rgba(r, g, b, a) expressions with values between 0 and 255.
/^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*\)$/iTest regex
Code & Markup
HTML Tags Matcher & Stripper
Matches HTML markup tags for sanitization, stripping, or token extraction.
/<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s+[^>]*?)?\/?>/gTest regex
Code & Markup
Semantic Version (SemVer 2.0)
Full SemVer 2.0.0 specification regex validating major, minor, patch, and optional pre-release/build tags.
/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/Test regex