Skip to main content
AllDevToolsHub
Back to all patterns

CSS hsla() Color

Web & Network

Validates a CSS hsla(h, s, l, a) color string.

/^hsla\(\s*(?:\d{1,3})(?:deg)?\s*,\s*(?:\d{1,3})%\s*,\s*(?:\d{1,3})%\s*,\s*(?:0|1|0?\.\d+)\s*\)$/

How it works

Hue is 0–360 (with optional deg unit), saturation and lightness are percentages, alpha is 0–1.

Test Cases

Should Match

  • hsla(120, 50%, 50%, 1)
  • hsla(0deg, 100%, 50%, .5)

Should NOT Match

  • hsl(120, 50%, 50%)
  • hsla(120, 50, 50, 1)

Quick Summary

Matches the comma-separated hsla(h, s%, l%, a) CSS syntax.