Back to all patterns
CSS HSL Color Validation
Validation
Validates CSS hsl() color values like hsl(120, 100%, 50%).
/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/How it works
HSL colors specify hue (0-360 degrees), saturation (0-100%), and lightness (0-100%). This pattern validates the syntax but does not enforce the numeric ranges, hsl(400, 150%, 200%) would pass.
Test Cases
Should Match
- hsl(120, 100%, 50%)
- hsl(0, 0%, 0%)
- hsl(360, 100%, 100%)
Should NOT Match
- hsla(120, 100%, 50%, 0.5)
- hsl(120 100% 50%)
- rgb(0, 128, 0)
Quick Summary
Validates CSS hsl() color syntax with hue, saturation%, and lightness%. Does not validate numeric ranges (hue 0-360, saturation/lightness 0-100). Does not match hsla() or the modern space-separated syntax.
Key Takeaways
Key Takeaways
- Format: hsl(hue, saturation%, lightness%)
- Hue is in degrees (0-360), saturation and lightness are percentages
- Does not validate numeric ranges, check capture groups separately
- CSS Color Level 4 allows hsl(H S% L%) without commas, this pattern requires commas
Use Cases
When to use it
- Validating HSL color inputs in design tools
- Parsing HSL values from CSS files
- Converting HSL to RGB in color utility functions
Watch out
Common Mistakes
- Not validating hue range (0-360) and percentage ranges (0-100) after matching
- Forgetting that modern CSS allows hsl(H S% L%) without commas
FAQ
CSS HSL Color Validation, Frequently Asked
Why use HSL instead of RGB?
HSL is more intuitive for humans, you can easily adjust lightness or saturation without recalculating all three RGB components.
How do I convert HSL to RGB?
Use a color library like 'chroma-js' or 'color' in JavaScript, or implement the HSL-to-RGB algorithm from the CSS spec.