Skip to content

Instantly share code, notes, and snippets.

Last active August 6, 2021 19:24
Show Gist options
  • Save JJLindsey/e2b41ba6a1865d38e9974a3fe7c18379 to your computer and use it in GitHub Desktop.
Save JJLindsey/e2b41ba6a1865d38e9974a3fe7c18379 to your computer and use it in GitHub Desktop.

Matching HEX Values using RegEx

This tutorial will explain the various Regular Expressions/RegEx using HEX values. Regular Expressions are sequences of characters that are used to find certain patterns of characters within a string, or to find and replace a character or sequence of characters within a string. Uses of RegEX include validating user input in HTML fields, finding keywords in webpages, and verifying and parsing text in files, code and applications.


This tutorial will use the following regular expression used to match HEX values as an example:


(Code snippets reference the above expression.)

"Hex colors are a way of representing colors from various color models through hexadecimal values. A hexadecimal color follows the format #RRGGBB, where RR is red, GG is green, and BB is blue. These hexadecimal integers can be in a range of 00 to FF to specify the intensity of the color." - Shutterstock

Table of Contents

Regex Components


designated character(s): ^ $

used to match text at the start (^) of a string and the end of a string ($).

code snippet: /^...$/

Example: ^First and last$ => string must exactly match | ^first => finds string begin with 'first' | last$ => finds string that ends with 'last'

/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - string must begin with # since it is preceded by ^ and should contain at least 3 characters where {3} is followed by $. See Quantifiers for further explanation of {}.


Fixed Quantifiers

designated character(s): {}

used to match exact quantity or a quantity range.

code snippet: {6} {3}

Example: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - the first quantifier {6} indicates that there should be exactly 6 characters ranging from a-f and 0-9. The second quantifier {3} in our HEX example indicates that OR 3 characters ranging from a-f and 0-9 since it is separated by the pipe(bar) symbol |.

Optional Quantifiers

designated character(s): ?

used to indicate that the preceding character(s) is optional in the match.

code snippet: /#?

Example: This could be used to find instances of both the British and American spelling in a string - humour or humor would be homou?r.

/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - matching the # is an option.

Alternation (OR) Operator

designated character(s): |

used to allow the option of matching character before OR after the | symbol.

code snippet: ...{6}|[a-f0-9]...

Example: cat|dog|mouse would match cat, dog, or mouse.

/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - matching 6 characters in the range of [a-f0-9] is one option OR matching 3 characters in the range of [a-f0-9] is the other possible match.

Character Classes

designated character(s): []

used to match any of the enclosed characters from a range or a series within []

code snippet: [a-f0-9]

we can also negate a character set by using the anchor symbol ^ before a set of characters, ie. [^0h2] would match any character that is NOT 0, h, or 2.

Example: [abc] would match a - in cat, b - in bubbles, or c - in cactus.

/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - looks for a range of letters [a-f] and numbers [0-9] in a HEX value.

Grouping and Capturing

designated character(s): ()

grouping of characters is accomplished using open and closed parentheses and allows for limitations in Alternation.

code snippet: ([a-f0-9])

Example: 'Do you prefer (beaches|mountains)?' => will first match 'Do you prefer' then match either 'beaches' or 'mountains'.

/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - using grouping to enclose the range of characters in our HEX value searches for 6 OR 3 sets of charactes provided in our range.


Jennifer Lindsey

If you have any questions, reach out to me on Git Hub, or send me a message

©Jennifer Lindsey 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment