In this tutorial we'll be explaining the regex used to match a hex value. Hex values, which are short for hexadecimal values, represent colors in web development and design. Hex values are a base-16 numeral system, and the colors they represent consist of a combination of 3 or 6 characters, often starting with a # symbol. Let's explore when and where this hex regex is used, get into each part of it, and describe its functionality so we can all understand how it matches hex values and where we can apply the regular expression.
This GitHub Gist decodes the regex used for matching a hex value:
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/
Hex values denote colors and are commonly used in HTML and CSS. Hex values are strings of 3-6 digits that when combined, code for unique colors. These 3-6 characters are combinations of the lowercase letters a-f and the numbers 0-9. The regular expression above includes all these characters and thus is designed to match hex values. At the beginning and end of the regex, you'll see /. These slashes indicate the start and end of the regex, commonly in JavaScript. This regex can be used for several purposes, including:
- Obtaining color information from HTML and CSS files/pages,
- Validating user input,
- Making sure all colors in files are coded in hex.
The hex matching regex has two anchors: ^ and $. The ^ denotes the position at the start of the string and the $ the end of the string. It is important to declare the start and end of the string to make sure the entire string matches the pattern of the regex.
Hex values can be 3 or 6 characters. In this regex, the {3} and {6} tell the computer, or program, how many times the subset of characters that comprise hex values must appear in the text/code being matched. Here, specifically, the {3} and {6} correspond to the occurrences of the characters [a-f0-9]. The regex will determine if the text/code input matches a hex value if it contains 3 or 6 of the characters a-f +/- 0-9.
The OR operator symbol is |. Since hex values can be 3 or 6 characters, it allows the regex to look for values that match either 3 OR (|) 6 characters, so that all hex values in each document can be matched. It is important to note that most hex values used in web design begin with a hash, #. The regex above includes #? - the ? tells the computer or program that there may be 0 or 1 occurrences of the preceding character, #. The regex will therefore match hex values that do, or do not, begin with a #.
Bracket expressions define a specific set of characters that the regular expression should match. In the hex matching regex we have been breaking down, the bracket expression [a-f0-9] is used and specifies the valid characters in a hex value. Specifically, [a-f0-9] includes the range of lowercase letters from a to f as well as the range of single digit integers from 0 to 9. This bracket expression requires any matched characters to be within the ranges a-f and/or 0-9, which ensures that the regex only matches valid hex characters.
The character class in the hex matching regular expression is the [a-f0-9]. The regex tells the computer/program to look only for hex values that contain instances of characters within the character class. [a-f0-9] specifies lowercase letters from a-f and integers from 0-9.
In a regex, parentheses () are used for both grouping and capturing. 'Grouping' is the process of combining multiple character classes or patterns together, while 'Capturing' refers to saving the text/code that the regex matches. In the hex matching regex we've been exploring, the () contains the character classes with their quantifiers separated by the OR operator, [a-f0-9]{6}|[a-f0-9]{3}, and serves 2 purposes: it brings these 2 potential hex patterns of 3 vs. 6 characters together, and allows the computer/program to save the hex values it matches. Having both the 3-character and 6-character possibilities within the () allows the regex to match hex values of 3 | 6 characters!
I hope you learned a bit about hex values and their matching regex! Thanks for reading, see you next time! - Ashley :) <3