Regex for matching any hex, rgb(a), or hsl(a) value. Assumes that you've lowercased the string and removed spaces.

full-match.js

/^(#?([a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})|rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)|rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|0?\.\d|1(\.0)?)\)|hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)|hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\))$/

hex-match.js

/^#?([a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})$/

hsl-match.js

/^hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)$/

hsla-match.js

/^hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\)$/

rgb-match.js

/^rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)$/

rgba-match.js

/^rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|0?\.\d|1(\.0)?)\)$/

Visualizations

I've created visualizations for each of the regex matches.

Full

Hex

HSL

HSLa

RGB

RGBa

The visualizations were created with Regexper and converted to PNG. They are CC BY 3.0 licensed.

Thanks for this great regular expression.
But rgba-match.js seems not match the case when alpha is 0. eg: rgba(0,0,0,0)

And, hex-match.js maybe should match 4 or 8 digits.
Because #1234、#0000ff66 is also valid color string.
/^([a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})$/i

@percy507 Thanks for the feedback. I've updated the regexes and their diagrams.

😂Here i am again.

• some points

  • rgb atom maybe should support decimal ((0|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)(\.\d+)?|255)
  • hsl and hsla: merge 35\d|3[0-4]\d to 3[0-5]\d
  • hsla alpha match rules should same to rgba
  • hsl and hsla: support decimal (((0|3[0-5]\d|[12]\d\d|0?\d?\d)(\.\d+)?)|360) ((0|100|0?\d{1,2})(\.\d+)?)%

For simplify code, it is a good idea to use RegExp constructor😜.

And, find a more complex version.🌚

@percy507 It maches alpha with 0 I check It. It works great here is a demo.

You may want to consider putting \s* before number value groups in the RGB and HSL regexes so that you can capture formatted RGB strings like rgb(100, 200, 90) that may container spaces

rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),\s*(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),\s*(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)