Hex Color Regex Tester

The Pattern

``regex ^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$ `

Flags: gm — multiline, so ^ and $ anchor to each line rather than the whole input.

What It Accepts and Rejects

Three Branches, Three Lengths

The alternation covers the three legal hex forms: #RGB shorthand, the standard #RRGGBB, and #RRGGBBAA with an alpha channel. Each branch pins an exact digit count, which is what rejects #12345 — five digits matches none of the three.

Order inside the alternation matters less than the anchors. Without ^ and $, #12345 would match on its first three digits and be accepted.

The Limits of This Pattern

CSS also accepts four-digit shorthand with alpha (#RGBA), which this pattern rejects. Adding [0-9a-fA-F]{4} to the alternation covers it. More importantly, a regex cannot tell you whether a colour is *usable* — contrast, colour-blind legibility and brand compliance are all beyond what any pattern can check.

Testing Before Shipping

A regex that has only been tried against inputs you expect to match is untested. Every pattern needs three kinds of case:

1. Valid inputs that should match, including the awkward-but-legal ones. 2. Invalid inputs that should not, especially near-misses that differ by one character. 3. Adversarial inputs — very long strings, unusual Unicode, and nesting that could trigger catastrophic backtracking.

Paste your own examples into the tester above and watch which lines highlight. A pattern that matches everything you throw at it is usually too permissive rather than correct.

Catastrophic Backtracking

Nested quantifiers over overlapping character classes — (a+)+, (\w+\s?)* — can take exponential time on a non-matching input. On a server that is a denial-of-service bug, not a performance issue. If a pattern is applied to user input, bound the input length first and prefer explicit alternation over nested repetition.

Anchors, Greediness and Backtracking

Three behaviours account for most regex surprises, and this pattern shows all three.

Anchors. ^ and $ pin the match to the start and end of the input. Without them, \d{3} matches the 123 inside abc123def. With m in the flags — as here — they pin to each *line* instead, which is what lets one pattern be tested against a list.

Greediness. .* takes as much as it can and gives back only when forced; .*? takes as little as possible. On , the pattern <.*> matches the whole string and <.*?> matches just .

Backtracking. When a match fails, the engine reverses and tries other splits. Nested quantifiers like (a+)+ make that exponential, and a 30-character input can hang a server — a class of denial of service known as ReDoS. Avoid nesting quantifiers, and prefer explicit character classes over . wherever you can.

Testing It Properly

`javascript const pattern = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/gm;

// A global regex keeps lastIndex between calls, so reusing one across // test() calls returns alternating true/false on the same input. pattern.lastIndex = 0;

// Named groups make the result readable const named = /(?\d{4})-(?\d{2})/; const { groups } = '2026-08'.match(named); `

Write the failing cases first. A pattern that accepts everything valid is easy; one that also rejects everything invalid is the hard half, and it is where the bugs are.

When Not to Use a Regex

Structured formats have parsers, and the parser is always more correct: new URL() for URLs, DOMParser for HTML, JSON.parse` for JSON, a date library for dates. Reach for a regex to *find* things in unstructured text, not to validate something a parser understands.