Pattern

Regex for Hex color

CSS hex color — 3, 4, 6, or 8 hex digits.

The Hex color regex is ^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$ — copy it below, or open it in the explainer for a token-by-token breakdown.

The pattern

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

Try in explainer → Download cheat sheet ↓

What it matches

#fff
#ffff
#ff5733
#ff5733aa
#000

What it doesn't match

#ff
#ff57333
ff5733
#xyz

Notes & gotchas

Supports shorthand (#rgb), shorthand with alpha (#rgba), full (#rrggbb), and full with alpha (#rrggbbaa).

Code in your language

Use the explainer's Code tab to generate ready-to-paste snippets in JavaScript, Python, Java, .NET, Go, Ruby, and PHP for this pattern.

Open in explainer →

Token-by-token breakdown

Every part of the pattern, left to right:

Token	Meaning
`^`	start of string (or line in multiline mode)
`#`	literal text “#”
`(`	start of a capturing group
`[0-9a-fA-F]{3,4}`	between 3 and 4 times: any of: digits, a–f, A–F
`\|`	OR — try the alternative
`[0-9a-fA-F]{6}`	exactly 6 times: any of: digits, a–f, A–F
`\|`	OR — try the alternative
`[0-9a-fA-F]{8}`	exactly 8 times: any of: digits, a–f, A–F
`)`	end of group
`$`	end of string (or line in multiline mode)

About this pattern

Identifier formats like UUIDs, hashes, and version strings have well-defined structures that regex captures cleanly. The pattern verifies format; checksums and validity against a registry need additional checks.

Quick usage in different languages

This exact pattern — with the correct escaping and idioms for each language:

JavaScript: /^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value)
Python: re.match(r"^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$", value)
Java: Pattern.compile("^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$").matcher(value).matches()
C# / .NET: Regex.IsMatch(value, @"^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$")
Go: regexp.MustCompile(`^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$`).MatchString(value)
Ruby: /^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.match?(value)
PHP: preg_match('~^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$~', $value)

The explainer’s Code tab regenerates these for any pattern you paste, and the downloadable cheat sheet bundles the breakdown, all seven snippets, and the pitfalls below onto one printable page.

Common pitfalls

Anchored to the whole string. This pattern uses ^ and $, so it requires the entire input to match. To find it inside a longer text, drop the anchors and use the global (g) flag.
Case sensitivity. Letter ranges are case-sensitive — use the i flag if the input case can vary.
Validate beyond format. Matching the format doesn't guarantee the value is real. Confirm the hex color against a source of truth (database, API, or checksum) where it matters.

Standards & sources

This pattern is based on the following authoritative specification(s) and issuing authorities. Formats can change — always confirm against the primary source.

W3C CSS Color Module Level 4

Related patterns

More patterns in the Codes & IDs category: