A Regular Expression that matches CSS lengths

Kylir — Wed, 02 Jul 2008 19:15:05 +0000

As a followup to my previous post, here’s a useful regular expression for selecting a valid CSS length.

[-+]?[0-9]*\.?[0-9]+(px|ex|em|in|cm|mm|pt|pc|%)

A Regular Expression that matches CSS colors

Kylir — Fri, 29 Feb 2008 04:12:11 +0000

Recently I needed to have a Regular Expression which would match valid CSS colors. I wasn’t able to find any after searching the Internets for a while, so I wrote my own.

(#([0-9A-Fa-f]{3,6})\b)|

(aqua)|(black)|(blue)|(fuchsia)|

(gray)|(green)|(lime)|(maroon)|

(navy)|(olive)|(orange)|(purple)|

(rgb\(\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,

\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,

\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*\))|

(rgb\(\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*\))

Just as a recap, a valid CSS color can be represented as a…

named color, such as “red”, “green”, “blue”, “black”, etc.
hexadecimal value, such as #ff0000 (red), #00ff00 (green), #0000ff (blue), #000000 (black), etc. Some hexadecimal values can be reduced to just three characters. For example, red is #f00 and green is #0f0.
triplet consisting of the color’s RGB values, such as rgb(255,0,0) for red and rgb(0,255,0) for green.

The Regular Expression listed above should be able to handle any of the variants that a CSS color can throw at it.

Kylir's Website » Regular Expressions

A Regular Expression that matches CSS lengths

A Regular Expression that matches CSS colors