Regex Pattern for Hex Colors

Hex color codes are ubiquitous in web development — they appear in CSS stylesheets, design token files, Tailwind configuration, Figma exports, accessibility audit reports, and brand guidelines. Validating and extracting hex colors with regex is a common task whether you're building a color picker, linting a design token file, or parsing a CSS file to extract the color palette used by an application. This pattern matches both the 3-digit shorthand (#RGB) and the 6-digit full form (#RRGGBB), with the hash prefix being optional since some contexts store hex colors without it (for example, the value attribute of an HTML color input omits the #). The alternation (|) inside the capturing group tries the 6-digit form first — this is important because trying 3 digits first would match the first three digits of a 6-digit color and leave three trailing characters unmatched. Test cases in this example cover: a standard 6-digit color with uppercase letters, a 3-digit shorthand in lowercase, a 6-digit color without the hash prefix, a standard uppercase 6-digit color, an invalid color using the letter G (hex only goes to F), a 5-digit value that's neither 3 nor 6 digits, a 7-digit value that's one too many, and an rgb() value that should not match the hex pattern. The [a-fA-F0-9] character class covers both uppercase and lowercase hex digits. Since many CSS tools and linters prefer lowercase hex (#ff5733 instead of #FF5733), you might want to enforce case in your pattern. Use [a-f0-9] for lowercase-only validation or add the i flag to make the match case-insensitive without changing the character class. Extending the pattern: 8-digit hex with alpha channel is increasingly common in modern CSS (#RRGGBBAA). Add a third alternation for 8 digits: #?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3}). This covers all CSS hex color formats including the newer opacity-in-hex format. Real-world scenarios: a design system audit tool extracts all hex colors from a CSS codebase and reports which colors aren't in the approved palette; a code formatter converts uppercase hex to lowercase for consistency; a color accessibility checker extracts foreground and background color pairs to calculate contrast ratios. Tips: when replacing or transforming hex colors in a file, use the global flag /g to match all occurrences and capture groups to transform just the hex digits without altering surrounding content.

/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/

# Test cases:
#FF5733
#fff
FF5733
#AABBCC
#GG0000
#12345
#1234567
rgb(255,0,0)