Regex for HSL Color
Regex Pattern
^hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$CSS HSL color function hsl(h, s%, l%)
Quick Answer
The regex pattern for hsl color is `^hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$`. CSS HSL color function hsl(h, s%, l%). This works in JavaScript, Python, Ruby, PHP, Java, and most regex engines that support PCRE syntax.
Test Examples
| Input | Result |
|---|---|
| hsl(360, 100%, 50%) | ✓ Matches |
| hsl(0, 0%, 0%) | ✓ Matches |
| hsl( 120 , 50% , 75% ) | ✓ Matches |
| hsl(360, 100, 50) | ✗ No match |
| hsla(0,0%,0%,1) | ✗ No match |
| rgb(0,0,0) | ✗ No match |
Code Examples
javascript
const regex = /^hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$/;
const isValid = regex.test(value);python
import re
pattern = r'^hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$'
if re.match(pattern, value):
print("valid")ruby
pattern = /^hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$/
if value =~ pattern
puts "valid"
endphp
if (preg_match('/^hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$/', $value)) {
echo "valid";
}java
String pattern = "^hsl\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}%\\s*,\\s*\\d{1,3}%\\s*\\)$";
boolean isValid = value.matches(pattern);Frequently Asked Questions
Related Regex Patterns
Positive Integer
Integers greater than zero (no leading zeros)
Non-negative Integer
Zero or positive integer
Decimal Number
Optionally signed decimal number
Hex Color Code
3 or 6-digit hex color with optional #
USD Currency
US dollar amount with optional $ and thousands separators
Hex Color with Alpha
Hex color code with optional alpha channel (3, 4, 6, or 8 digits)