REAL-WORLD CHALLENGES
Hex colors
Everything so far, in one pattern: sets, counts, alternation, boundaries.
Match CSS hex colors: a # followed by exactly three or exactly six hex digits. "#fff" and "#1a2b3c" are colors. "#12345" is not, and neither is "#xyz".
Think in pieces: a hex digit is [0-9a-fA-F]. Exactly six or exactly three needs alternation - and try six FIRST, because the engine takes the first branch that fits and {3} would happily match the first three of six digits. Close with \b so five digits cannot pass as three-plus-garbage.
Match valid 3- or 6-digit hex colors, # included.
/ /
color: #fff;
must match: "#fff"
background: #1a2b3c
must match: "#1a2b3c"
shade #ABC border
must match: "#ABC"
bad: #12345
must match nothing
bad: #xyz
must match nothing