Regex for RGB Color Code
RGB (Red Green Blue) color codes are used to specify colors in digital devices and software, such as computers, phones, and tablets. RGB color codes consist of three values that represent the intensity of the red, green, and blue color channels, respectively. Each value can range from 0 to 255, with 0 representing the minimum intensity and 255 representing the maximum intensity for each channel. In this article let's understand how we can create a regex for RGB Color Code and how regex can be matched for RGB 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 RGB Color Code value
- The value should start with RGB or RGBA
- The value should be followed by a
(and a) - It should have 3 or 4 values separated by
, - The RGB values should be between 0 and 255
- Last value opacity should be between 0 and 1
Regex for checking if its a valid RGB Color Code value
Regular Expression-
/rgba?\((\d{1,3}), (\d{1,3}), (\d{1,3})(, ){0,1}(0(\.\d+)?|1(\.0+)?)\)/igm
Test string examples for the above regex-
| Input String | Match Output |
|---|---|
| #zero | does not match |
| rgb(255, 15, 120) | matches |
| argb(255, 15, 120) | does not match |
| rgba(255, 15, 120, 0.8) | matches |
Here is a detailed explanation of the above regex-
/rgba?\((\d{1,3}), (\d{1,3}), (\d{1,3})(, ){0,1}(0(\.\d+)?|1(\.0+)?)\)/igm
rgb matches the characters rgb literally (case insensitive)
a matches the character a with index 9710 (6116 or 1418) literally (case insensitive)
? matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
\( matches the character ( with index 4010 (2816 or 508) literally (case insensitive)
1st Capturing Group (\d{1,3})
\d matches a digit (equivalent to [0-9])
{1,3} matches the previous token between 1 and 3 times, as many times as possible, giving back as needed (greedy)
, matches the characters , literally (case insensitive)
2nd Capturing Group (\d{1,3})
\d matches a digit (equivalent to [0-9])
{1,3} matches the previous token between 1 and 3 times, as many times as possible, giving back as needed (greedy)
, matches the characters , literally (case insensitive)
3rd Capturing Group (\d{1,3})
\d matches a digit (equivalent to [0-9])
{1,3} matches the previous token between 1 and 3 times, as many times as possible, giving back as needed (greedy)
4th Capturing Group (, ){0,1}
{0,1} matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
A repeated capturing group will only capture the last iteration. Put a capturing group around the repeated group to capture all iterations or use a non-capturing group instead if you're not interested in the data
, matches the characters , literally (case insensitive)
5th Capturing Group (0(\.\d+)?|1(\.0+)?)
1st Alternative 0(\.\d+)?
0 matches the character 0 with index 4810 (3016 or 608) literally (case insensitive)
6th Capturing Group (\.\d+)?
? matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
\. matches the character . with index 4610 (2E16 or 568) literally (case insensitive)
\d matches a digit (equivalent to [0-9])
+ matches the previous token between one and unlimited times, as many times as possible, giving back as needed (greedy)
2nd Alternative 1(\.0+)?
1 matches the character 1 with index 4910 (3116 or 618) literally (case insensitive)
7th Capturing Group (\.0+)?
? matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
\. matches the character . with index 4610 (2E16 or 568) literally (case insensitive)
0 matches the character 0 with index 4810 (3016 or 608) literally (case insensitive)
+ matches the previous token between one and unlimited times, as many times as possible, giving back as needed (greedy)
\) matches the character ) with index 4110 (2916 or 518) literally (case insensitive)
Global pattern flags
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)
i modifier: insensitive. Case insensitive match (ignores case of [a-zA-Z])
Hope this article was useful to check the validity of a RGB color code value using regex.
