← GalleryHSL(A) Color Matching✨ Emoji Combos/(?(DEFINE)
(?<decimal>(?(int)([.][0-9]+)?|[.][0-9]+))
(?<percentage>
(100|
(?<int>([0-9]|[1-9][0-9]))? # Have integer be optional (0-100 only)
(?P>decimal) # Have decimal required when an integer is not included
)
(?<symbol>%)
)
(?<hue>
(?<int>36[0]|3[0-5][0-9]|[12][0-9][0-9]|[1-9]?[0-9])? # Have integer be optional
(?P>decimal) # Have decimal required when an integer is not included
(?<symbol>\s*deg\s*)?
)
(?<alpha>
(?(alpha),\s*(
1[.]0|
(?<int>0)? # Have integer be optional
(?P>decimal) # Have decimal required when integer is not incldue
)\s*)
)
(?<hsl>\s*(?P>hue)\s*,\s*(?P>percentage)\s*,\s*(?P>percentage)\s*)
)
hsl(?<alpha>a)?\((?P>hsl)(?P>alpha)\)/gxJiPCRE+37 years ago✓ Pre-loaded
About this regex
This complex PCRE regex is designed to comprehensively match and validate HSL and HSLA color strings, such as those used in CSS. It captures the hue (0-360 degrees, with an optional 'deg' unit), saturation (0-100%), and lightness (0-100%), along with an optional alpha transparency value (0-1). It is highly useful for parsing stylesheets, validating user input in web applications, or extracting color values from design-related text files.
