What is an example of a matching and non-matching string?

A valid matching string is "#10b981". A non-matching string is "#10b981999".

Is this regex safe from ReDoS (Catastrophic Backtracking)?

Yes, this pattern is optimized for linear execution time and safe for browser-side validation without locking up the UI thread.

HomeRegex LibraryHexadecimal Color Code (#HEX) Regex

100% Client-Side • 0 B Data Leaves Browser

formatting

Hexadecimal Color Code (#HEX) Regex

Q: How do I test this regex in JavaScript and TypeScript?

Use regex.test(): const regex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/; const isValid = regex.test(inputString);

Matches 3-digit shorthand, 6-digit RGB, or 8-digit RGBA hex color codes.

Regular Expression Pattern:

/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/

Valid Match Example:

#10b981

Invalid / Non-Match Example:

#10b981999

Regex Syntax Breakdown & Explanation

•^# : Requires hashtag prefix
•[0-9a-fA-F]{3} : 3-digit shorthand (#RGB)
•[0-9a-fA-F]{6} : 6-digit standard (#RRGGBB)
•[0-9a-fA-F]{8} : 8-digit alpha (#RRGGBBAA)

Implementation in Popular Languages

JavaScript / TypeScript

const regex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
const isValid = regex.test("#10b981");
console.log(isValid); // true

Python (re)

import re

pattern = r"^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$"
match = re.match(pattern, "#10b981")
print(bool(match)) # True

Go (regexp)

package main
import (
  "fmt"
  "regexp"
)

func main() {
  re := regexp.MustCompile(`^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$`)
  fmt.Println(re.MatchString("#10b981"))
}

Frequently Asked Questions

Everything you need to know regarding specifications, syntax, and security best practices.

The regular expression pattern is /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/. Matches 3-digit shorthand, 6-digit RGB, or 8-digit RGBA hex color codes.