Regex for Hex Color Code

A hex color code is a six-digit code used to specify a color in HTML, CSS, and other programming languages and software. It is written as a hash symbol (#) followed by three pairs of hexadecimal digits, which represent the levels of red, green, and blue (RGB) in the color. Each pair of digits can range from 00 to FF, which corresponds to the minimum (0) and maximum (255) values for each color channel. In this article let’s understand how we can create a regex for Hex Color Code and how regex can be matched for Hex Color Code values.

Regex (short for regular expression) is a powerful tool used for searching and manipulating text. It is composed of a sequence of characters that define a search pattern. Regex can be used to find patterns in large amounts of text, validate user input, and manipulate strings. It is widely used in programming languages, text editors, and command line tools.

Conditions to match a Hex Color Code value

• The value should start with # and should be followed by 6 or 3 characters.
• Valid characters are 0-9, A-F, a-f.
• Maximum value for each character is F (15 in decimal).

Regex for checking if its a valid Hex Color Code value

Regular Expression-

/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/gm

Test string examples for the above regex-

Here is a detailed explanation of the above regex-

/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/gm

^ asserts position at start of a line
## matches the character ## with index 3510 (2316 or 438) literally (case insensitive)
1st Capturing Group ([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})
1st Alternative [A-Fa-f0-9]{6}
Match a single character present in the list below [A-Fa-f0-9]
{6} matches the previous token exactly 6 times
A-F matches a single character in the range between A (index 65) and F (index 70) (case insensitive)
a-f matches a single character in the range between a (index 97) and f (index 102) (case insensitive)
0-9 matches a single character in the range between 0 (index 48) and 9 (index 57) (case insensitive)
2nd Alternative [A-Fa-f0-9]{3}
Match a single character present in the list below [A-Fa-f0-9]
{3} matches the previous token exactly 3 times
A-F matches a single character in the range between A (index 65) and F (index 70) (case insensitive)
a-f matches a single character in the range between a (index 97) and f (index 102) (case insensitive)
0-9 matches a single character in the range between 0 (index 48) and 9 (index 57) (case insensitive)
$ asserts position at the end of a line
Global pattern flags
i modifier: insensitive. Case insensitive match (ignores case of [a-zA-Z])
g modifier: global. All matches (don't return after first match)
m modifier: multi line. Causes ^ and $ to match the begin/end of each line (not only begin/end of string)

Hope this article was useful to check the validity of a hex color code value using regex. In conclusion, understanding hex color codes and their representation is crucial for web development. We delved into the significance of regex in verifying and manipulating these codes effectively. By utilizing a specific regex pattern, developers can accurately identify valid hex color code values. Regex empowers us to streamline processes, enhance text manipulation, and ensure the integrity of data in various programming contexts. Incorporating regex knowledge into your toolkit equips you with a valuable skill to validate and manage hex color codes effortlessly.