Xavier Bertels on tech, design & product

So here is a little Quick Tip to make your hex value colours in CSS short-hand with the Find & Replace function of your text editor and a little RegEx magic.

Find String:
#([0-9a-fA-F])\1([0-9a-fA-F])\2([0-9a-fA-F])\3

Replace String:
#$1$2$3

Of course, the Find & Replace function in your text editor must accept Regular Expressions for this to work.

But what does it do? Here is the RegEx broken down in pieces:

#([0-9a-fA-F])\1
Search for a string starting with the exact character #

#([0-9a-fA-F])\1
Search for a single character that is either an uppercase or a lower case digit or letter in the range 0-9 and a-f. Putting the search string […] between ( and ) makes it a group that we can reference.

#([0-9a-fA-F])\1
Back-reference the previous search group between ( and ) and repeat it. Note: the 1 does not mean “repeat it once”. It is the index number referring to the first RegEx group: the entire RegEx string between ( and ).

So if you search for #([0-9a-fA-F])\1 you will find the strings like: #aa, #ff, #99, #00.

The other parts are simply a repetition of the same core idea, but with the back-reference index numbers referring to their respective groups:

#([0-9a-fA-F])\1([0-9a-fA-F])\2([0-9a-fA-F])\3

The Replace String #$1$2$3 simply references the previously found groups with their respective index number. Since a group is everything between ( and ), it will replace the entire string with only the single characters that were found within that group, thus [0-9a-fA-F].

So it will find #aa55ff and replace it with #a5f. Pretty awesome, right?

Obviously, this is nothing ground-breaking, but I just thought I’d show you an example of what you can do with Regular Expressions. It is a very powerful, yet often overlooked tool that, once understood, can make your life as a Web Designer a little easier.