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)?)\)$/
@sethlopezme
Copy link
Author

sethlopezme commented Aug 20, 2015

Visualizations

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

Full

Full Match

Hex

Hex Match

HSL

HSL Match

HSLa

HSLa Match

RGB

RGB Match

RGBa

RGBa Match

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

@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