Matching hex colors using regex

regex.md

Identifying hex color using regex

HTML/CSS color are defined using six or three character hex values prefixed with an optional # symbol

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

Summary

This expression matches three or six valid hex digits prefixed with an optional #

Table of Contents

• Anchors
• Quantifiers
• Grouping Constructs
• Bracket Expressions
• Character Classes
• The OR Operator
• Flags
• Character Escapes

Regex Components

Anchors

A ^ symbol indicates start of string and a $ symbol marks the end.

Quantifiers

Three quantifiers are used in this expression.

1. ? after the literal # indicates zero or one of #
2. {6} requires six characters from the [a-f0f-9] class
3. {3} requires six characters from the [a-f0f-9] class

Grouping Constructs

() characters designate a group. In this case the group is either 6 or 3 hex digits

Bracket Expressions

[a-f0f-9] matches characters a through f and 0 through 9

Character Classes

[a-f0f-9] matches characters a through f and 0 through 9

The OR Operator

The | symbol allows the hex string be either of the patterns

Flags

The i flag at the end makes the regex case insensitive

Character Escapes

Not used

Author

Ilya Spivakov (github link)