PatternRegex

Match a hex color

Match CSS hex colors in both the 3- and 6-digit forms — with the word boundary that stops #abcd from half-matching.

Last updated

Patterng
#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b
Open in Regex Tester & Builder

Matches

  • #fff
  • #0a0b0f
  • #FF5733

Doesn’t match

  • #12
  • #abcd
  • 0a0b0f

Why it’s written this way

The alternation tries the 3-digit shorthand and the 6-digit long form; the trailing \b is what makes it honest. Without it, #abcd would "match" as #abc plus a stray d — with it, a 4- or 5-digit value fails outright instead of half-matching.

Case-insensitive by character class, so #FF5733 and #ff5733 both land without needing the i flag.

Edge cases to know

  • 4- and 8-digit hex with alpha (#fff8, #0a0b0fcc) are rejected — add {4} and {8} alternatives if your CSS uses them.
  • It finds colors in prose too, so a Markdown heading anchor like #introduction never matches (letters g–z fail the class), but a bare hex word after # would.
  • Named colors and rgb()/oklch() functions are out of scope — this is only the # literal.

Related in Patterns