Hex Color Code (#RGB / #RRGGBB / #RRGGBBAA) Regex for JavaScript

What this pattern does

This page provides a well-structured, multi-part regular expression for matching hex color code (#rgb / #rrggbb / #rrggbbaa), ported and verified for JavaScript. A rigorously tested regex reduces debugging time and protects your application from edge-case failures. The snippet below is ready to drop into your JavaScript project — whether you're validating in an Express middleware, a Next.js API route, or a client-side form.

Javascript Implementation

// Hex Color Code (#RGB / #RRGGBB / #RRGGBBAA)
// ReDoS-safe | RegexVault — Web & Network > Misc

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

function validateHexColorCodeRgbRrggbbRrggbbaa(input: string): boolean {
  return hexColorCodeRgbRrggbbRrggbbaaRegex.test(input);
}

// Example
console.log(validateHexColorCodeRgbRrggbbRrggbbaa("#fff")); // true

Test Cases

When to use this pattern

This pattern is drawn from the Web & Network > Misc category and carries a ReDoS-safe certification. That matters for JavaScript developers because especially critical in long-running Node.js event loops where a ReDoS vulnerability can block the entire process. RegexVault audits patterns against known backtracking attack vectors, ensuring you have the necessary context before using this regex in a high-stakes production environment.

Common Pitfalls

Technical Notes

The alternation order matters: 8-digit first, then 6, then 3 — prevents 6-char strings from partially matching the 3-char alternative. CSS4 also supports 4-digit (#RGBA) — add [0-9a-fA-F]{4} to support it.