Hex Color Regular Expression – Free, Online, Private

The pattern

CSS allows #RGB, #RGBA, #RRGGBB, and #RRGGBBAA. This pattern matches those four lengths and no others. #6366f1, #fff, and #6366f180 match in the sample. #12345 does not, because five digits is not a CSS hex color. #gg0000 does not, because g is outside hex. The word boundary after the digits keeps the match from ending in the middle of a longer hex token.

The source is #(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b. The flags on this page are i. i means case-insensitive. m means ^ and $ match at line breaks, which is how the sample can show several candidates. g is not set. The tester finds non-overlapping matches, and without g a pattern with no anchor still reports the matches it walks. The box under the title is a tester with this pattern and the sample already filled in. Edit either one. Nothing you type is uploaded. The same tester, without a preset, is the regex tool.

How to read it

The # is literal. The alternation is ordered from the lengths we want, and the engine takes the first branch that works at that position. A 6-digit color cannot be swallowed by the 3-digit branch because the boundary and the rest of the digits have to fit the branch the engine committed to. In practice you should test both #fff and #ffffff. The i flag allows uppercase hex. \b is a boundary between a word character and a non-word character. A hash is not a word character, so the boundary is checked after the digits.

What it will not do

The pattern does not understand color names, rgb(), or the newer CSS color functions. It does not expand #fff into #ffffff. That is a conversion, and the hex-to-RGB converter does it. Eight digits are matched as a color with alpha. Some older tools reject eight digits. If you are targeting those tools, drop the 4 and 8 branches. The pattern does not require the color to be the whole string.

A match is not a parsed value. An email pattern does not send mail, a UUID pattern does not allocate an id, and a password pattern does not store a password. When the next step needs a real parser, use one: the URL constructor, a date library, a semver library, or the converters on this site. The expression is the part you can see.

JavaScript, Python, and Go

The JavaScript snippet uses the RegExp constructor so the source does not have to be escaped for a literal slash. The Python snippet uses a normal string with the same escapes JSON would emit, which keeps \d as a regex digit class. Go's snippet uses a raw string. If the pattern contains a lookahead, the Go snippet says so and does not call MustCompile, because RE2 would reject it at runtime.

JavaScriptconst re = new RegExp("#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b", "i");
const found = text.match(re);
console.log(found ? found[0] : "no match");

Pythonimport re

pattern = re.compile("#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b", re.IGNORECASE)
found = pattern.search(text)
print(found.group(0) if found else "no match")

Gopackage main

import (
	"fmt"
	"regexp"
)

func main() {
	text := ""
	re := regexp.MustCompile(`(?i)#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b`)
	fmt.Println(re.FindString(text))
}