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)?)\)$/

@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)\)