Skip to content

Instantly share code, notes, and snippets.

@sethlopezme
Last active February 13, 2024 07:35
Show Gist options
  • Save sethlopezme/d072b945969a3cc2cc11 to your computer and use it in GitHub Desktop.
Save sethlopezme/d072b945969a3cc2cc11 to your computer and use it in GitHub Desktop.
Regex for matching any hex, rgb(a), or hsl(a) value. Assumes that you've lowercased the string and removed spaces.
/^(#?([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)?)\))$/
/^#?([a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})$/
/^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)?)\)$/
/^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)?)\)$/
@percy507
Copy link

percy507 commented Sep 7, 2021

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)

@percy507
Copy link

percy507 commented Sep 7, 2021

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

@sethlopezme
Copy link
Author

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

@percy507
Copy link

😂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.🌚

@KOUISAmine
Copy link

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

@ammuench
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment