Patterns for common data Updated November 2026

Regex for hex color

A CSS hex color matches ^#(?:[0-9a-f]{3}){1,2}$ with the i flag: a hash followed by exactly 3 or 6 hex digits. To also allow alpha (4 or 8 digits) use ^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$ with i. The i flag is simpler than writing [0-9a-fA-F] everywhere.

Syntax

/^#(?:[0-9a-f]{3}){1,2}$/i

Examples

["#fff", "#1E90FF", "#12345", "1E90FF"].map(s => /^#(?:[0-9a-f]{3}){1,2}$/i.test(s))

Result: [true, true, false, false]

Five digits and a missing hash both fail.

/^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test("#1E90FF80")

Result: true

Allows #rgba and #rrggbbaa as well.

"color: #333; background: #FAFAFA".match(/#[0-9a-f]{6}\b|#[0-9a-f]{3}\b/gi)

Result: ["#333", "#FAFAFA"]

Longer alternative first, plus \b, so #FAFAFA is not cut to #FAF.

"#1E90FF".match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i).slice(1).map(h => parseInt(h, 16))

Result: [30, 144, 255]

Three captures converted from hex to decimal.

Common mistakes

Forgetting the i flag, so #FFF fails against [0-9a-f].
Writing [0-9a-f]{3,6}, which accepts 4 and 5 digit strings; use (?:[0-9a-f]{3}){1,2} or an explicit alternation.
Listing the 3 digit alternative first without \b, so #FAFAFA matches as #FAF; put the longer option first or add a boundary.
Expecting the regex to accept named colors or rgb(); those need separate patterns.

Practice Regex for hex color

These drills check your answer on live data, free, no account needed.

Hex colorsThe whole line must match. Match a CSS hex color: # followed by exactly 3 or exactly 6 hex digits (0 to 9, a to f, either case).
Ranges: a letter and two digitsThe whole line must match. Match one lowercase letter followed by exactly two digits, like a12.
Counted repeats: 3 to 5 digitsThe whole line must match. Match lines made of 3, 4 or 5 digits and nothing else.

Questions

What is the regex for rgb() colors?

^rgb$\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*$$ matches rgb(30, 144, 255). It does not check that each number is at most 255; validate the captured numbers afterwards.

How do I match a hex number like 0xFF?

^0x[0-9a-f]+$ with the i flag. For a fixed width such as a byte, use ^0x[0-9a-f]{2}$.

Is the hash required?

In CSS yes. If your input may omit it, make it optional with ^#?(?:[0-9a-f]{3}){1,2}$ and add the hash back when you store the value.

Ranges in character classesHow character ranges work by code point, how to combine them, the invalid [a-Z] and surprising [A-z], and how to express numeric ranges with alternation.
QuantifiersWhat * + ? {n} {n,} and {n,m} mean, how greedy matching works, how to repeat a group instead of a single character, and the silent {2, 3} mistake.
Regex flagsWhat each JavaScript regex flag does (case-insensitive, global, multiline, dotAll, unicode, sticky), how to set them, and the lastIndex trap with g and test.
Alternation |How the pipe works, why ^cat|dog$ does not do what it looks like, how to group alternatives, and why option order matters when one is a prefix of another.