Regexp Matching Hex Color Syntax (and Shorten form)

Question

Well, I'm pretty new on regex and in particular on JavaScript regexp.

I'm looking for making a regexp that match the hex color syntax (like #34ffa6) Then I looked at the w3school page: Javascript RegExp Object

Then that's my regexp:

/^#[0-9a-f]{6}/i

It seems to work but, if I want it to match also the "short hex color syntax" form? (like #3fa), it's possible? I've tried using the character | but maybe I'm wrong with the syntax.

rodneyrehm · Accepted Answer · 2012-03-13 11:05:43Z

105

/^#[0-9a-f]{3,6}$/i

would match #abc, #abcd, #abcde, #abcdef

/^#([0-9a-f]{3}|[0-9a-f]{6})$/i

would match #abc and #abcdef but not #abcd

/^#([0-9a-f]{3}){1,2}$/i

would match #abc and #abcdef but not #abcd

/^#(?:[0-9a-f]{3}){1,2}$/i

would match #abc and #abcdef but not #abcd

Have a look at RegExp - MDN to learn more about regular expressions in javascript.

answered Mar 13, 2012 at 11:05

rodneyrehm

13.6k1 gold badge43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Andy E Over a year ago

+1, was just about to post the final of your examples. I would switch to non-capturing parenthesis (?:), though.

Manse Over a year ago

@AndyE does the non-capture increase performance ? or just a nice to have !

Andy E Over a year ago

@ManseUK: yes, although the difference would be negligible in most cases, it's just a "best practice" to get yourself into the habit of only using capturing parenthesis when you actually need to capture a subexpression.

xcatliu Over a year ago

The uppercase letter is also acceptable, so the RegExp should be /^#(?:[0-9a-fA-F]{3}){1,2}$/i

rodneyrehm Over a year ago

@xcatliu that's covered by the i flag, it turns expressions case-insensitive

|

Manse · Accepted Answer · 2012-03-13 11:02:36Z

9

Try this :

/^#([0-9a-f]{6}|[0-9a-f]{3})$/i

[0-9a-f]{6} = 6 characters [0-9a-f]{3} = 3 characters $ = end

answered Mar 13, 2012 at 11:02

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Comments

Saket Patel · Accepted Answer · 2012-03-13 11:06:44Z

6

this should work /#[0-9a-f]{6}|#[0-9a-f]{3}/gi

and for trying out regular expressions on the fly and learning it you can use this site http://gskinner.com/RegExr/

answered Mar 13, 2012 at 11:06

Saket Patel

6,7031 gold badge29 silver badges36 bronze badges

Comments

Sideways S · Accepted Answer · 2018-11-06 23:10:03Z

You might want to incorporate 4 and 8 digit hex for #RGBA and #RRGGBBAA. I am doing this in a different setting where I'm using match() and split() to generate arrays. I could not get all the variations posted by @rodneyrehm to work with the g flag and match, but the first (and most verbose) solution works if I list the character count in high to low order: 8, 6, 4, 3.

let rx  = /(?:#)[0-9a-f]{8}|(?:#)[0-9a-f]{6}|(?:#)[0-9a-f]{4}|(?:#)[0-9a-f]{3}/ig
let s   = "123 #AA22CC 100% #12F abc #A2Cd #aa11cc44 test 236px";
let arr = s.match(rx); // arr == ["#AA22CC", "#12F", "#A2Cd", "#aa11cc44"]

The MDN docs say that (?:#) should forget "#", but it does not, and (?=#) simply fails. What am I misunderstanding?
My final goal is to include the other numeric values in the array returned from match(). I'm almost there...

Jawad Ahbab · Accepted Answer · 2022-05-05 13:26:00Z

2

The possible Hex Colors are -

Format	Example
#RGB	#F00
#RGBA	#F005
#RRGGBB	#FF7C00
#RRGGBBAA	#FF7C0016

Regexp to match color `without` alpha

let regex = /^#([A-F0-9]{3}|[A-F0-9]{6})$/i

Regexp to match color `with` alpha

let regex = /^#([A-F0-9]{3,4}|[A-F0-9]{6}|[A-F0-9]{8})$/i

answered May 5, 2022 at 13:26

Jawad Ahbab

1,6661 gold badge21 silver badges31 bronze badges

Collectives™ on Stack Overflow

Regexp Matching Hex Color Syntax (and Shorten form)

5 Answers 5

8 Comments

Comments

Comments

Comments

The possible Hex Colors are -

Regexp to match color `without` alpha

Regexp to match color `with` alpha

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

Comments

Comments

The possible Hex Colors are -

Regexp to match color without alpha

Regexp to match color with alpha

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Regexp to match color `without` alpha

Regexp to match color `with` alpha